/* =========================================================
   tokens.css — デザイントークン定義（Figma変数と1:1対応）
   Figma: 4VQ3YJcaxXqGR1wtR6XBgk 「🎨 DS – Foundations」(45:5)

   ここが唯一の正。色・余白・角丸・書体のハードコードは禁止し、
   必ずこのファイルの変数を参照すること。
   ========================================================= */

:root {
  /* ---- Semantic colors（Figma Semanticコレクション） ----
     2026-08-03: bg/page を gray/200→gray/100、bg/inverse を gray/900→gray/500 に変更（Figma変数と同期） */
  --color-bg-page: #f0f0f0;        /* color/bg/page (gray/100) */
  --color-bg-surface: #ffffff;     /* color/bg/surface (white) */
  --color-bg-inverse: #666666;     /* color/bg/inverse (gray/500) */
  --color-text-primary: #262626;   /* color/text/primary (gray/700) */
  --color-text-secondary: #666666; /* color/text/secondary (gray/500) */
  --color-text-tertiary: #808080;  /* color/text/tertiary (gray/400) */
  --color-text-inverse: #ffffff;   /* color/text/inverse (white) */
  --color-accent-primary: #6db99a; /* color/accent/primary (green/400) */
  --color-border-default: #bfbfbf; /* color/border/default (gray/300) */
  --color-icon-default: #404040;   /* color/icon/default (gray/600) */
  --color-feedback-error: #b5473c; /* color/feedback/error (red/400) — フォームエラー */

  /* ---- 補助（Primitives直参照が必要な場面のみ） ---- */
  --color-gray-100: #f0f0f0;       /* フォーム入力欄の背景など（gray/100） */
  --color-gray-200: #dedede;       /* 旧bg/page。区切りや面の差が必要な箇所で使用 */
  --color-bg-footer: #262626;      /* フッター背景（gray/700）。2026-08-03のフッター刷新で追加 */

  /* ---- Spacing（Figma Spacingコレクション） ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 28px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 56px;
  --space-6xl: 64px;
  --space-section: 88px;

  /* ---- Radius（Figma Radiusコレクション）----
     2026-08-03: 「角丸が強すぎる」ため全段階を50%に変更（full=ピルは除く） */
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ---- Typography ---- */
  --font-display: "Lora", Georgia, "Times New Roman", serif; /* 英字見出し（Medium 500） */
  --font-body: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* フォントサイズ（Figmaテキストスタイル14種） */
  --text-display-hero: 92px; /* Display/Hero  Lora Md */
  --text-display-l: 64px;    /* Display/L     Lora Md */
  --text-display-m: 44px;    /* Display/M     Lora Md */
  --text-display-s: 36px;    /* Display/S     Lora Md */
  --text-display-xs: 28px;   /* Display/XS    Lora Md */
  --text-jp-heading: 17px;   /* JP/Heading    Noto Bold */
  --text-label-l: 15px;      /* JP/Label-L    Noto Md */
  --text-body: 14px;         /* JP/Body       Noto Reg lh180% */
  --text-nav: 13.5px;        /* JP/Nav        Noto Md */
  --text-button: 12.5px;     /* JP/Button     Noto Md */
  --text-body-s: 12px;       /* JP/Body-S     Noto Reg */
  --text-label-s: 12px;      /* JP/Label-S    Noto Md */
  --text-caption: 11.5px;    /* JP/Caption    Noto Reg */
  --text-tag: 10.5px;        /* JP/Tag        Noto Md */

  /* ---- レイアウト ---- */
  --layout-max: 1440px;      /* デザインカンバス幅 */
  --layout-gutter: 48px;     /* PC左右余白（SPは16px、base.cssで上書き） */
  --layout-card-max: 1344px; /* カード幅（1440 - 48×2） */
}