/* tokens.css — デザイントークン（CSS変数のみ。セレクタは :root と dark override のみ）
 * 出典: REQUIREMENTS.md §3（カラー/タイポ/スペーシング/角丸/シャドウ）
 *       ＋ Figma get_variable_defs（実バインド値。REQUIREMENTS と衝突時は Figma を優先）
 * フォント実体（@font-face）は fonts.css 側。ここでは font-family 文字列のみ扱う。 */

:root {
  /* ==========================================================
   * 1. Colors — Primitive（基本色）
   * ========================================================== */

  /* brand */
  --c-brand-50: #ebecf2;
  --c-brand-100: #cacfe3;
  --c-brand-300: #50587d;
  --c-brand-900: #131936;
  --c-brand-white: #ffffff;

  /* gray */
  --c-gray-50: #f6f7fb;   /* Figma上は "color/brand/background" とも呼ばれるが値は同一 */
  --c-gray-100: #f1f5f9;
  --c-gray-300: #cbd5e1;
  --c-gray-500: #697086;
  --c-gray-700: #334155;
  --c-gray-900: #0f172a;

  /* blue（アクション・リンク） */
  --c-blue-50: #eaf0ff;   /* Figma "color/blue/50"（REQUIREMENTS未記載・tint用途） */
  --c-blue-100: #c2d3ff;  /* Figma "color/blue/100"（REQUIREMENTS未記載・dark modeの淡色用途） */
  --c-blue-500: #005efe;  /* action / link */
  --c-blue-700: #1b43cc;  /* hover */
  --c-blue-900: #143196;  /* pressed */

  /* accent */
  --c-accent-lime: #61ff48;
  --c-accent-magenta: #f879ff;        /* REQUIREMENTS §3.1 accent/magenta */
  --c-accent-magenta-light: #f870ff;  /* Figma "color/accent/magenta-light"。comparison-table / course-section--magenta の実測値はこちら */
  --c-accent-blue: #2149ff;
  --c-accent-yellow: #ffff71;         /* Figma "color/accent/Yellow" */
  /* 参考: Figma には無名の "Yellow": #ffff00 という別変数も存在するが、REQUIREMENTS
     に対応する意味づけが無くどのコンポーネントにも未使用。将来判明するまで採用しない。 */

  /* tint（Figmaにのみ存在。背景の淡色バリエーション） */
  --c-accent-magenta-tint: #fff0fd;
  --c-accent-green-tint: #f3fff0;
  --c-accent-blue-tint: #eaf0ff;

  /* status */
  --c-error-500: #ef4444;
  --c-success-500: #22c55e;

  /* ==========================================================
   * 2. Colors — Semantic（Light既定 / Dark は下部の override 参照）
   * ========================================================== */

  --c-bg-base: var(--c-brand-white);
  --c-bg-subtle: var(--c-gray-50);
  --c-bg-brand: var(--c-blue-500);

  /* text/default: REQUIREMENTS §3.1 は "Light=brand/500" と記載しているが brand/500 は
     存在しない（brand は 50/100/300/900 の4段のみ）。Figma実データにも brand/500 は無い。
     本文の中間トーンは brand/300(#50587d)、見出し等の主要濃色テキストは brand/900(#131936)。
     ここでは「本文の既定テキスト色」として安全側の brand/900 を採用し、
     brand/300 は補助トーン（--c-text-secondary）として別途定義して両方を残す。 */
  --c-text-default: var(--c-brand-900);
  --c-text-secondary: var(--c-brand-300); /* 上記あいまいさの救済トークン。中間トーンの本文に使用 */
  --c-text-muted: var(--c-gray-500);
  --c-text-inverse: var(--c-brand-white);
  /* text/brand(link): REQUIREMENTS は Dark=blue/300 と記載するが blue は 500/700/900 の3段のみで
     blue/300 は存在しない。Figma にある blue/100(#c2d3ff) を「暗背景上で読める淡いブルー」の
     代替として採用（意図＝dark bg 上で action-default の blue/500 よりコントラストを確保）。 */
  --c-text-brand: var(--c-blue-500);
  --c-border-default: var(--c-gray-100);
  --c-action-default: var(--c-blue-500);
  --c-action-hover: var(--c-blue-700);
  --c-action-disabled: var(--c-gray-300);
  --c-status-error: var(--c-error-500);
  --c-status-success: var(--c-success-500);

  /* セクション固有背景（コンポーネント仕様 §4 より。トークン化して common.css から参照） */
  --bg-course-overview: var(--c-gray-50);   /* #F6F7FB */
  --bg-school-info: var(--c-gray-100);      /* #F1F5F9 */
  --bg-reasons: #fffaeb; /* REQUIREMENTS §6 サンプルCSSに登場するが §3.1 primitive一覧には無い固有背景色。
                             reasons-section(04/06/08) 専用として単独トークン化 */
  --bg-course-section-blue: var(--c-accent-blue);      /* #2149FF */
  --bg-course-section-magenta: var(--c-accent-magenta-light); /* #F870FF（実測値） */
  --bg-course-section-green: var(--c-success-500);     /* #22C55E */

  /* ==========================================================
   * 3. Spacing scale
   * ========================================================== */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;   /* 実測多用値（409回）。8/12へ丸めず単独定義 */
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;   /* 実測多用値（349回） */
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;   /* 【figma-parity 2026-07-07】未定義参照で ov-card padding が無効化していたため追加（Figma 実在値） */
  --space-64: 64px;
  --space-80: 80px;
  --space-90: 90px;   /* セクション左右パディング（重要・242回） */
  --space-96: 96px;
  --space-112: 112px;
  --space-120: 120px;
  --space-160: 160px;
  --space-224: 224px; /* ヒーロー上下パディング（12回） */

  /* ==========================================================
   * 4. Section layout
   * ========================================================== */
  --pad-x: var(--space-90);       /* PC セクション左右余白 90px */
  --pad-x-sp: 24px;               /* SP セクション左右余白 */
  --section-y: var(--space-120);  /* PC セクション上下パディング */
  --section-y-sp: 64px;           /* SP セクション上下パディング */
  --content-gap: var(--space-112); /* セクション内 itemSpacing */
  --card-gap: var(--space-40);     /* カード間ギャップ */
  --w-container: 1260px;           /* コンテンツ最大幅 */
  --hero-height: 544px;            /* hero-section PC */
  --hero-height-sp: 300px;         /* hero-section SP */
  --hero-pad-y: var(--space-224);  /* ヒーロー上下パディング */
  --breadcrumb-height: 160px;      /* breadcrumb-bar */
  --header-h: 70px;                /* site-chrome 固定ヘッダー高。main の上部オフセットに使用 */

  /* ==========================================================
   * 5. Radius
   * ========================================================== */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-5: 5px;     /* 実測多用（135回・未定義扱いだったため追加）。カード/入力欄 */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-32: 32px;   /* 実測多用（24回）。大型ボタン */
  --radius-pill: 100px; /* 実測多用（36回）。ピル型ボタン・バッジ */
  --radius-full: 9999px;

  /* ==========================================================
   * 6. Shadow
   * ========================================================== */
  --shadow-sm: 0 2px 4px -2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.1);
  /* 以下2つは REQUIREMENTS §3.5「定義済みスタイル（使用は少ない）」。
     opacity値は §3.5 に記載が無いため、上記3種と同系統の色(15,23,42)で
     shadow-lg よりわずかに濃い値を採用（要素が大きい＝影も明瞭にする意図）。 */
  --shadow-card: 0 4px 12px -2px rgba(15, 23, 42, 0.12);
  --shadow-floating: 0 12px 32px -4px rgba(15, 23, 42, 0.16);

  /* ==========================================================
   * 7. Typography
   * ========================================================== */
  --font-en: "Inter", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-base: "Inter", "Noto Sans JP", sans-serif; /* REQUIREMENTS §3.2 必須スタック */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800; /* Inter装飾テキスト用（可変フォントで対応済み） */

  /* PC テキストスタイル（font-size / line-height ペア） */
  --fs-hero: 56px;      --lh-hero: 1.35;
  --fs-h1: 44px;        --lh-h1: 1.4;
  --fs-h2: 34px;        --lh-h2: 1.45;
  --fs-h3: 26px;        --lh-h3: 1.4;
  --fs-lead: 20px;      --lh-lead: 1.6;
  --fs-body: 16px;      --lh-body: 1.74;
  --fs-body-sm: 14px;   --lh-body-sm: 1.4;
  --fs-caption: 12px;   --lh-caption: 1.7;
  --fs-button: 16px;    --lh-button: 1.5;

  /* SP テキストスタイル */
  --fs-hero-sp: 34px;      --lh-hero-sp: 1.45;
  --fs-h1-sp: 30px;        --lh-h1-sp: 1.45;
  --fs-h2-sp: 25px;        --lh-h2-sp: 1.5;
  --fs-h3-sp: 21px;        --lh-h3-sp: 1.55;
  --fs-lead-sp: 17px;      --lh-lead-sp: 1.8;
  --fs-body-sp: 14px;      --lh-body-sp: 1.65;
  --fs-body-sm-sp: 12px;   --lh-body-sm-sp: 1.75;
  --fs-caption-sp: 12px;   --lh-caption-sp: 1.7; /* SP個別指定なし。PCと同値を流用 */
  --fs-button-sp: 15px;    --lh-button-sp: 1.5;

  /* Inter 装飾テキスト実測値（REQUIREMENTS §3.2）。セクション背景装飾・価格・統計数値等、
     繰り返し登場するサイズのみ抜粋してトークン化（一過性のサイズは個別CSSで直接指定してよい）。 */
  --fs-decor-giant: 306px;  /* 例: "MESSAGE" セクション背景装飾文字 */
  --fs-decor-xl: 92px;      /* 例: "20"（キャンペーン割引率） */
  --fs-decor-lg: 70px;      /* 例: "3,000"（統計数値） */
  --fs-decor-md: 64px;      /* 例: "MISSION" / "VISION" */
  --fs-decor-price: 58px;   /* 例: "693,000"（講座価格。48〜58pxの幅は58を代表値に） */
  --fs-decor-number: 48px;  /* 例: "01" "02" "03"（セクション番号） */
  --fs-decor-brand: 42px;   /* 例: "CANAAN Education Group" */
  --fs-decor-slogan: 24px;  /* 例: "DESIGN A NEW ME." / ナビ "TOP" "NEWS" */
  --fs-decor-label: 20px;   /* 例: "POINT" ラベル */
}

/* ==========================================================
 * Dark mode override（Semantic トークンのみ再定義）
 * レンダ検証ハーネスは Playwright の colorScheme（prefers-color-scheme）で
 * テーマ切替するため @media を必須で用意。data-theme 属性切替にも同値で追随できるよう
 * 同内容を :root[data-theme="dark"] にも複製する。
 * ========================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg-base: var(--c-gray-900);
    --c-bg-subtle: var(--c-gray-700);
    --c-bg-brand: var(--c-blue-500);

    --c-text-default: var(--c-gray-50);
    --c-text-secondary: var(--c-gray-300);
    --c-text-muted: var(--c-gray-300);
    --c-text-inverse: var(--c-gray-900);
    --c-text-brand: var(--c-blue-100);

    --c-border-default: var(--c-gray-700);
    --c-action-default: var(--c-blue-500);
    --c-action-hover: var(--c-blue-100);
    --c-action-disabled: var(--c-gray-700);

    --c-status-error: var(--c-error-500);
    --c-status-success: var(--c-success-500);
  }
}

:root[data-theme="dark"] {
  --c-bg-base: var(--c-gray-900);
  --c-bg-subtle: var(--c-gray-700);
  --c-bg-brand: var(--c-blue-500);

  --c-text-default: var(--c-gray-50);
  --c-text-secondary: var(--c-gray-300);
  --c-text-muted: var(--c-gray-300);
  --c-text-inverse: var(--c-gray-900);
  --c-text-brand: var(--c-blue-100);

  --c-border-default: var(--c-gray-700);
  --c-action-default: var(--c-blue-500);
  --c-action-hover: var(--c-blue-100);
  --c-action-disabled: var(--c-gray-700);

  --c-status-error: var(--c-error-500);
  --c-status-success: var(--c-success-500);
}