/* =============================================================================
   tokens.css — ベースデザイン（デザイントークン＝単一真実源）— 灯綺 TOKI
   -----------------------------------------------------------------------------
   ★ここがサイトの「ベースデザイン」です。事業ごとに変えるのは原則このファイルだけ。
     色・余白・文字・角丸・影・重なり順・ブレークポイントを 1 か所にまとめています。
     値の根拠は workspace/design-base.md §2〜§3（旧サイトの意匠を oklch へ移植）。

   構成は 02_conventions/css.md §1 に従い「2 段構成」です。
     1) 原始トークン … パレット（色見本）と各種スケール（寸法の段階）。生の値。
     2) 意味トークン … 用途で名付けたトークン（--color-primary など）。原始を参照する。
        → 部品 CSS は必ずこの「意味トークン」を参照します（生の値は書かない）。

   色は oklch()（知覚的に均一な現代色空間）で定義しています。
   本文の文字色は背景に対して コントラスト比 4.5:1 以上 を満たします（accessibility.md §1.1）。
     実測（2026-09-04）: ink-700/ivory-100 10.8:1・ink-500/ivory-300 4.8:1・gold-700/ivory-300 5.7:1
     ・burgundy-600/ivory-100 9.9:1・white/burgundy-600 10.8:1・gold-500（非テキスト）/ivory-100 3.7:1
   ダークモードは実装しない（color-scheme: light のみ）。理由: クリーム地と写真で成立する
   ブランド表現であり、暗転すると素材と配色の意図が崩れる（design-base.md §2）。
   ============================================================================= */

@layer tokens {
  :root {
    /* === 1) 原始トークン（パレット／スケール）=============================== */

    /* --- パレット（色見本）: oklch(明度 彩度 色相) --- */

    /* アイボリー〜クリーム（面） */
    --color-white: oklch(100% 0 0deg); /* 純白（カード） */
    --color-ivory-50: oklch(98.5% 0.014 90deg); /* 最も明るい面（ヒーロー・カード内） */
    --color-ivory-100: oklch(97% 0.022 85deg); /* ページ背景 */
    --color-ivory-200: oklch(95.5% 0.026 60deg); /* ブラッシュ（主役色の淡い面） */
    --color-ivory-300: oklch(92% 0.04 85deg); /* 一段沈んだ面（交互の節背景） */

    /* バーガンディ（主役） */
    --color-burgundy-500: oklch(48% 0.17 20deg); /* フォーカスリング */
    --color-burgundy-600: oklch(38% 0.15 20deg); /* CTA・強調・リンク */
    --color-burgundy-800: oklch(27% 0.11 18deg); /* ホバー */

    /* シャンパンゴールド（罫線・装飾。文字には gold-700 のみ） */
    --color-gold-200: oklch(88% 0.06 85deg);
    --color-gold-400: oklch(73% 0.08 80deg);
    --color-gold-500: oklch(60% 0.09 78deg); /* 罫線・装飾（非テキスト 3:1 以上） */
    --color-gold-700: oklch(46% 0.08 78deg); /* 小さな英字（アイブロウ等）5.4:1 以上 */

    /* インク（文字） */
    --color-ink-500: oklch(50% 0.04 70deg); /* 注記・キャプション */
    --color-ink-700: oklch(34% 0.03 65deg); /* 本文 */
    --color-ink-900: oklch(22% 0.02 60deg); /* 見出し */

    /* 状態色（クリーム背景で本文として 4.5:1 以上になる明度） */
    --color-green-600: oklch(50% 0.12 150deg); /* 成功 */
    --color-amber-700: oklch(52% 0.13 70deg); /* 注意 */
    --color-red-600: oklch(50% 0.19 25deg); /* エラー／必須 */

    /* --- スケール: 寸法（4px = 0.25rem を基準にした段階）--- */
    --size-0: 0;
    --size-1: 0.25rem; /*  4px */
    --size-2: 0.5rem; /*  8px */
    --size-3: 0.75rem; /* 12px */
    --size-4: 1rem; /* 16px */
    --size-5: 1.5rem; /* 24px */
    --size-6: 2rem; /* 32px */
    --size-7: 3rem; /* 48px */
    --size-8: 4rem; /* 64px */
    --size-9: 6rem; /* 96px */

    /* --- スケール: 角丸（旧サイトの矩形基調。ボタン 0・カード 4px）--- */
    --radius-0: 0;
    --radius-1: 0.25rem;
    --radius-2: 0.5rem;
    --radius-full: 9999px;

    /* === 2) 意味トークン（用途で名付ける）=================================
       部品 CSS（base.css / components.css / sections.css）はこちらだけを参照します。 */

    /* --- 配色（ライトのみ）--- */
    --color-bg: var(--color-ivory-100); /* ページ背景 */
    --color-surface: var(--color-white); /* カード等の面 */
    --color-surface-2: var(--color-ivory-50); /* ヒーロー・カード内の明るい面 */
    --color-surface-alt: var(--color-ivory-300); /* 交互の節背景 */
    --color-border: oklch(60% 0.09 78deg / 45%); /* 境界線（gold-500 の 45%） */
    --color-border-strong: var(--color-gold-500); /* 強い罫線（非テキスト 3:1 以上） */
    --color-border-soft: oklch(60% 0.09 78deg / 18%); /* 淡い区切り */
    --color-text: var(--color-ink-700); /* 本文（10.8:1） */
    --color-text-strong: var(--color-ink-900); /* 見出し・強調 */
    --color-text-muted: var(--color-ink-500); /* 補助テキスト（4.8:1 以上） */
    --color-text-on-primary: var(--color-white); /* 主役色の上に乗る文字 */
    --color-text-on-dark: var(--color-ivory-50); /* 濃い面（写真キャプション）に乗る文字 */
    --color-primary: var(--color-burgundy-600); /* 主役色（CTA・強調） */
    --color-primary-strong: var(--color-burgundy-800); /* 主役色の濃いめ（ホバー） */
    --color-primary-weak: var(--color-ivory-200); /* 主役色の淡い面 */
    --color-accent: var(--color-gold-500); /* 装飾（罫線・番号の下線）。文字には使わない */
    --color-accent-text: var(--color-gold-700); /* 英字アイブロウ等の小さな文字 */
    --color-accent-weak: var(--color-gold-200); /* グラデーション・淡い装飾 */
    --color-link: var(--color-burgundy-600); /* 本文中リンク（9.9:1） */
    --color-link-hover: var(--color-burgundy-800);
    --color-success: var(--color-green-600);
    --color-warning: var(--color-amber-700);
    --color-danger: var(--color-red-600);
    --color-focus: var(--color-burgundy-500); /* フォーカスリング（3:1 以上） */
    --color-veil: oklch(98.5% 0.014 90deg / 74%); /* ヒーロー写真に重ねるクリームの薄膜 */
    --color-veil-soft: oklch(95.5% 0.026 60deg / 45%); /* 同・ブラッシュ側 */

    /* --- 余白（スペーシング）--- */
    --space-3xs: var(--size-1);
    --space-2xs: var(--size-2);
    --space-xs: var(--size-3);
    --space-sm: var(--size-4);
    --space-md: var(--size-5);
    --space-lg: var(--size-6);
    --space-xl: var(--size-7);
    --space-2xl: var(--size-8);
    --space-3xl: var(--size-9); /* 節の上下余白 */

    /* --- 角丸 --- */
    --radius-sm: var(--radius-1);
    --radius-md: var(--radius-0); /* ボタンは矩形（旧サイト踏襲） */
    --radius-card: var(--radius-1); /* カードは 4px */
    --radius-pill: var(--radius-full);

    /* --- 影（暖色系の柔らかい影。alpha-value-notation=percentage）--- */
    --shadow-1: 0 10px 30px -12px oklch(34% 0.03 65deg / 16%);
    --shadow-2: 0 24px 60px -20px oklch(34% 0.03 65deg / 18%);

    /* --- 重なり順（z-index）。場当たり的な巨大値を禁じ段階管理する --- */
    --z-base: 0;
    --z-raised: 1; /* 同一スタッキング文脈内で写真の上に文字を載せる */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 800;
    --z-modal: 1000;
    --z-toast: 1100;

    /* --- ブレークポイント（メディアクエリで使う基準。トークンとして明示）--- */
    --bp-sm: 36rem; /* 576px 付近 */
    --bp-md: 48rem; /* 768px 付近 */
    --bp-lg: 64rem; /* 1024px 付近 */

    /* --- レイアウト --- */
    --layout-max-inline: 72rem; /* 本文コンテナの最大幅 */
    --layout-gutter: var(--space-md); /* 左右の余白 */
    --layout-prose: 48rem; /* 中央寄せの読み物ブロックの最大幅 */

    /* --- タイポグラフィ --- */

    /* 本文・見出し（和文明朝）。Web フォントは Google Fonts（display=swap） */
    --font-body: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Source Han Serif JP", serif; /* 本文は端末の明朝（Webフォントを読まない・design-base §3） */
    --font-heading: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif; /* 見出しのみ Google Fonts（600） */

    /* 英字の見出し・アイブロウ */
    --font-display: "Cormorant Garamond", "Georgia", serif;

    /* フォーム部品等（システムのゴシック） */
    --font-sans: system-ui, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Noto Sans Mono", monospace;

    /* 流体タイポ: clamp(最小, 推奨[vw含む], 最大)。中間幅でも連続的に変化する。 */
    --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem); /* 英字アイブロウ */
    --text-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 本文 */
    --text-md: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
    --text-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);
    --text-xl: clamp(1.6rem, 1.4rem + 1vw, 2rem);
    --text-2xl: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); /* 節見出し */
    --text-3xl: clamp(2.75rem, 2rem + 3vw, 4rem); /* 数値カード・大きな漢字 */
    --text-display: clamp(2.75rem, 1.6rem + 5vw, 6rem); /* ヒーロー見出し */
    --leading-tight: 1.25;
    --leading-snug: 1.5; /* 見出しの複数行 */
    --leading-normal: 1.9; /* 和文本文（旧サイト踏襲の広い行間） */
    --leading-loose: 1.9;
    --tracking-body: 0.04em;
    --tracking-heading: 0.12em; /* 節見出し */
    --tracking-wide: 0.18em; /* 小見出し・ボタン */
    --tracking-loose: 0.3em; /* ランク名・タグライン */
    --tracking-eyebrow: 0.4em; /* 英字アイブロウ */
    --tracking-logo-jp: 0.3em; /* ロゴ「灯綺」 */
    --tracking-logo-en: 0.5em; /* ロゴ「TOKI」 */

    /* --- モーション（reduced-motion で base.css が無効化する）--- */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 900ms; /* フェードイン */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* ブラウザ標準 UI（フォーム部品・スクロールバー）はライトのみ */
    color-scheme: light;
  }
}