/*
  tokens.css — デザイントークン正本
  参照: _仕様書/03_DesignSystem.md（値を変更する場合は仕様書の改訂とセットで行う）
*/
:root {
  /* ===== Color: Brand（ロゴ由来・固定） ===== */
  --color-brand-blue: #007CF0;
  --color-brand-red: #AF0336;

  /* ===== Color: UI ===== */
  --color-primary: #143C66;
  --color-primary-dark: #0C2A4A;
  --color-primary-light: #E9F0F8;
  --color-secondary: #35597F;
  --color-action: #0A63D6;
  --color-action-dark: #084FB0;

  /* ===== Color: Semantic ===== */
  --color-success: #1E8A5A;
  --color-success-text: #197A4E;
  --color-warning: #B7791F;
  --color-warning-text: #8A5A12;
  --color-error: #C20E3A;
  --color-success-bg: #E9F3EF;
  --color-warning-bg: #F8F2E9;
  --color-error-bg: #F9E7EB;

  /* ===== Color: Neutral ===== */
  --color-background: #FFFFFF;
  --color-surface: #F4F7FB;
  --color-border: #DBE3EC;
  --color-text: #16202C;
  --color-text-sub: #58657A;
  --color-text-inverse: #FFFFFF;

  /* ===== Color: Overlay / 反転面の派生色 ===== */
  --color-overlay: rgba(12, 42, 74, 0.4);
  --color-divider-inverse: rgba(255, 255, 255, 0.2);
  --color-text-inverse-muted: #CFE0F4;
  --color-overlay-inverse: rgba(255, 255, 255, 0.1);

  /* ===== Typography: font families ===== */
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  --font-latin: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, "SFMono-Regular", Menlo, monospace;

  /* ===== Typography: type scale ===== */
  --text-display: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  --text-h1: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-h2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-h4: 1rem;
  --text-body: 1rem;
  --text-small: 0.8125rem;
  --text-label: 0.75rem;

  /* ===== Spacing (8pt基準) ===== */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-120: 120px;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --section-y-lg: clamp(4rem, 2.8rem + 5vw, 7.5rem);

  /* ===== Radius ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-full: 999px;

  /* ===== Shadow ===== */
  --shadow-sm: 0 1px 2px rgba(12, 42, 74, 0.08);
  --shadow-md: 0 2px 4px rgba(12, 42, 74, 0.06), 0 8px 24px rgba(12, 42, 74, 0.10);
  --shadow-lg: 0 4px 8px rgba(12, 42, 74, 0.05), 0 24px 64px rgba(12, 42, 74, 0.14);

  /* ===== Motion ===== */
  --dur-snappy: 200ms;
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== Layout ===== */
  --container-max: 1120px;
  --container-md: 960px;
  --container-narrow: 760px;
  --container-pad: 16px;

  /* ===== Z-index ===== */
  --z-dropdown: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-drawer: 400;
  --z-toast: 500;

  /* ===== Focus / scroll-margin ===== */
  --scroll-margin: 72px;

  /* ===== Header height ===== */
  --header-height: 56px;
}

@media (min-width: 640px) {
  :root {
    --container-pad: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --scroll-margin: 88px;
    --header-height: 72px;
  }
}