/* ============================================================
   Life Design Studio — tokens.css (v1.0 SSoT)
   sinobu-design-taste + 桜井政博「ゲーム作るには」原則統合。
   このファイルが LDS のデザイン正本。styles.css / brushup.css の前にロード。
   2026-05-22 確定、企画書 §8 昇格用文言と一致。
   ============================================================ */

:root {
  /* ========== Surface: Light Cream (純白 #FFF 禁則) ========== */
  --color-bg:            #F1ECDF;  /* ベース紙 / OGL canvas 背景と完全同一 */
  --color-bg-paper:      #FAF6EA;  /* 中間紙(セクション地) */
  --color-bg-card:       #FDFAF1;  /* 最上カード(数値・グラフ載せる) */
  --color-bg-sunken:     #EDE7D6;  /* 凹み(タイムライン track 等) */
  --color-bg-hero:       #F1ECDF;  /* OGL canvas 背景と完全同一(境界を消す) */

  /* ========== Foreground: Ink ========== */
  --color-fg-primary:    #1A1D21;  /* 14.5:1 vs bg, AAA */
  --color-fg-secondary:  rgba(26, 29, 33, 0.78);  /* 8.0:1 AAA */
  --color-fg-dim:        rgba(26, 29, 33, 0.62);  /* 5.0:1 AA  本文下限 */
  --color-fg-faint:      rgba(26, 29, 33, 0.40);  /* 3.0:1 装飾線専用、文字NG */
  --color-fg-disabled:   rgba(26, 29, 33, 0.28);

  --color-divider:        rgba(26, 29, 33, 0.10);
  --color-divider-strong: rgba(26, 29, 33, 0.20);

  /* ========== Accent: Amber 単色原則 ========== */
  --color-accent:        #BA7517;  /* 4.4:1 AA / 本文OK */
  --color-accent-soft:   rgba(186, 117, 23, 0.10);
  --color-accent-edge:   rgba(186, 117, 23, 0.40);
  --color-accent-strong: #8C5610;  /* 6.8:1 AAA ホバー強調 */
  --color-accent-on:     #FAF6EA;  /* amber 塗りCTA上の文字 7.2:1 AAA */

  /* ========== Semantic ==========
     桜井「色による区分」: UI 上の色情報は amber 単色 + グレースケール基本。
     success/danger は **グラフ凡例のみ** で使用、ボタン・カード・テキストでは
     使用しない。アラート/警告/成功は塗り潰し vs 枠線 vs 太字で区別する。 */
  --color-success:       #3B6D11;  /* 現金推移ライン、6.1:1 */
  --color-success-soft:  rgba(59, 109, 17, 0.10);
  --color-danger:        #A32D2D;  /* 赤字・投資なし比較線、5.4:1 */
  --color-danger-soft:   rgba(163, 45, 45, 0.10);

  /* ========== Investment-frame (ゲインフレーム視覚化) ========== */
  --color-invest-base:   #BA7517;
  --color-invest-edge:   #8C5610;
  --color-invest-soft:   rgba(186, 117, 23, 0.18);

  /* ========== Focus ========== */
  --color-focus-ring:    #BA7517;
  --shadow-focus:        0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);

  /* ========== Typography ==========
     既存 3 フォント維持。
     桜井「文字の大きさ」: 漢字はスペースを大きめに、日本語前提で +1px。 */
  --font-display: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body:    "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-numeric: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* サイズスケール (clamp() で流体タイポ) */
  --text-2xs: 0.6875rem;  /* 11px 装飾極小 */
  --text-xs:  0.8125rem;  /* 13px mono ラベル */
  --text-sm:  0.875rem;   /* 14px キャプション下限 */
  --text-base:1.0625rem;  /* 17px 本文(桜井+1px、日本語前提) */
  --text-md:  1.125rem;   /* 18px 本文長文 */
  --text-lg:  1.25rem;    /* 20px リード文・H3 */
  --text-xl:  1.5625rem;  /* 25px H2 */
  --text-2xl: 1.9375rem;  /* 31px H1 */
  --text-3xl: 2.4375rem;  /* 39px セクションヒーロー */
  --text-4xl: 3.0625rem;  /* 49px ページヒーロー */
  --text-5xl: 3.8125rem;  /* 61px ヒーロー大 */
  --text-6xl: 4.75rem;    /* 76px ヒーロー巨 */

  /* テキスト拡大ボタン(桜井「文字の大きさ」追加) */
  --font-size-multiplier: 1;  /* JS で 1 / 1.25 / 1.5 切替 */

  /* 行間・字間 */
  --lh-tight:   0.95;  /* 数値ヒーロー(76px)、字間が抜けないよう詰める */
  --lh-snug:    1.2;   /* 見出し */
  --lh-normal:  1.5;   /* UI ラベル */
  --lh-body:    1.6;   /* 英文本文 */
  --lh-body-jp: 1.8;   /* 日本語本文 */

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-jp:      0.02em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.18em;

  /* ========== Spacing (8pt grid) ========== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ========== Container & Breakpoints ========== */
  --max-w-prose:       680px;
  --max-w-page-narrow: 960px;
  --max-w-page:        1200px;
  --max-w-app:         1440px;

  --bp-sm:  375px;
  --bp-md:  640px;
  --bp-lg:  1024px;
  --bp-xl:  1440px;
  --bp-2xl: 1920px;

  /* ========== Radius (8px+ 禁則、6px 例外なく統一) ========== */
  --radius-none: 0;
  --radius-xs:   2px;     /* focus outline */
  --radius-sm:   4px;     /* 小ボタン */
  --radius-md:   6px;     /* カード・大ボタン(LDS 標準、最大値) */
  --radius-pill: 9999px;  /* 小ピルラベルのみ例外 */

  /* ========== Shadow (原則使わない) ========== */
  --shadow-none:  none;
  --shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);

  /* ========== Border ========== */
  --border-hairline: 1px solid var(--color-divider);
  --border-strong:   1px solid var(--color-divider-strong);
  --border-accent:   1px solid var(--color-accent-edge);

  /* ========== Motion (bounce 禁則、ease-out 標準) ========== */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-medium:  300ms;
  --dur-slow:    600ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ========== Accessibility ========== */
  --min-touch:    44px;
  --min-font:     16px;
  --focus-width:  2px;
  --focus-offset: 2px;
}

/* ============================================================
   数字の絶対ルール: 必ず tabular-nums + slashed-zero
   金融データの可読性確保(桁ガタつき防止、O との混同回避)
   ============================================================ */
.num, .lp-stat .num, .num-hero, .lp-mono, .mono {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
  letter-spacing: var(--tracking-normal);
}

/* ============================================================
   prefers-reduced-motion 一括 reset
   個別演出ごとに override せず、誤って残るリスクを避ける
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   forced-colors (Windows High Contrast Mode) 対応
   ============================================================ */
@media (forced-colors: active) {
  .lp-card { border: 1px solid CanvasText; background: Canvas; }
  .lp-btn  { border: 2px solid ButtonText; }
}

/* ============================================================
   テキスト拡大モード(桜井「文字の大きさ」)
   .text-zoom-large / .text-zoom-xlarge を body に付与
   ============================================================ */
body.text-zoom-large  { --font-size-multiplier: 1.25; }
body.text-zoom-xlarge { --font-size-multiplier: 1.50; }

body.text-zoom-large  .prose,
body.text-zoom-large  .lp-shell,
body.text-zoom-xlarge .prose,
body.text-zoom-xlarge .lp-shell {
  font-size: calc(var(--text-base) * var(--font-size-multiplier));
}

/* ============================================================
   アクセシビリティ最適化モード(桜井「いまどきの親切設計」)
   body.mode-accessibility または ?mode=accessibility で発動
   - 文字大 / ハイコントラスト / 派手色なし / ヒーロー静止 / モーション全停止
   ============================================================ */
body.mode-accessibility {
  --font-size-multiplier: 1.25;
  --color-fg-primary: #000;
  --color-bg: #FFF;
  --color-bg-card: #FFF;
  --color-bg-paper: #FFF;
  --color-bg-hero: #FFF;
  --color-accent: #5C3500;          /* 高コントラスト amber */
  --color-accent-strong: #3D2300;
  --color-divider: #000;
}
body.mode-accessibility *,
body.mode-accessibility *::before,
body.mode-accessibility *::after {
  animation: none !important;
  transition: none !important;
}
body.mode-accessibility .lp-hero__canvas {
  display: none !important;
}
body.mode-accessibility .lp-hero__fallback {
  display: block !important;
}