/* Hallmark · design tokens — design.md がソース・オブ・トゥルース。
 * すべての色・フォント・余白・角丸・イージングはここで名前を持つ。
 * application.css（および将来のCSS）は必ず var(--token) で参照し、生の値を書かない。 */

:root {
  /* ===== 色（OKLCH。vibe: あたたかい文具 × ブランド青） ===== */
  --color-paper:        oklch(97.5% 0.012 85);   /* 生成りクリームの背景 */
  --color-card:         oklch(99.4% 0.005 85);   /* カード・ヘッダー面 */
  --color-paper-2:      oklch(94.5% 0.015 85);   /* 一段沈む面（解説・ミニ行など） */
  --color-ink:          oklch(27% 0.03 265);     /* 本文 */
  --color-muted:        oklch(51% 0.022 262);    /* 補助テキスト */
  --color-rule:         oklch(90% 0.012 85);     /* 罫線 */

  --color-accent:        oklch(54% 0.19 262);    /* ブランド青（≈ #2563eb） */
  --color-accent-strong: oklch(48% 0.19 262);    /* hover・押下 */
  --color-accent-soft:   oklch(95% 0.025 262);   /* 青の淡い面（チップ・選択中） */
  --color-accent-ink:    oklch(99.4% 0.005 85);  /* 青地の上の文字 */

  /* 意味色（クイズの本質。色だけに頼らず◯×アイコン併用が前提） */
  --color-correct:       oklch(58% 0.15 150);
  --color-correct-soft:  oklch(95% 0.045 150);
  --color-correct-ink:   oklch(40% 0.11 150);
  --color-wrong:         oklch(52% 0.19 27);
  --color-wrong-soft:    oklch(95.5% 0.025 27);
  --color-wrong-ink:     oklch(42% 0.15 27);
  --color-gold:          oklch(75% 0.14 80);     /* おぼえた星 */
  --color-gold-soft:     oklch(95% 0.05 90);
  --color-gold-ink:      oklch(45% 0.10 70);

  --color-focus:         oklch(58% 0.20 262);    /* :focus-visible 専用 */
  --color-dev:           oklch(54% 0.20 295);    /* 開発環境バナー */
  --color-line:          #06C755;                /* LINEブランドカラー（外部規定色） */
  --color-line-strong:   #05b34c;

  /* ===== 旧トークン名のエイリアス（既存のビュー内 inline style からも参照される） ===== */
  --primary:      var(--color-accent);
  --primary-dark: var(--color-accent-strong);
  --correct:      var(--color-correct);
  --wrong:        var(--color-wrong);
  --bg:           var(--color-paper);
  --card:         var(--color-card);
  --text:         var(--color-ink);
  --muted:        var(--color-muted);
  --border:       var(--color-rule);

  /* ===== フォント（2+1: display + body + mono outlier） ===== */
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", -apple-system, "Hiragino Sans", sans-serif;
  --font-body:    -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ===== 余白（4ptスケール） ===== */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ===== 角丸 ===== */
  --radius-card: 12px;
  --radius-btn:  10px;
  --radius-xs:   6px;
  --radius-2xs:  4px;
  --radius-pill: 999px;

  /* ===== オーバーレイ（アルファ付きの色もトークンで持つ） ===== */
  --overlay-scrim: oklch(99.4% 0.005 85 / 0.45);  /* 通信中の白スクリム */
  --overlay-dim:   oklch(0% 0 0 / 0.45);          /* ボトムシートの背面 */
  --overlay-hold:  oklch(20% 0.03 265 / 0.35);    /* 解説ロックの未充填部分 */

  /* ===== 影（whisper。強い影は使わない） ===== */
  --shadow-whisper: 0 1px 2px oklch(30% 0.03 265 / 0.06);
  --shadow-lift:    0 8px 24px -10px oklch(40% 0.08 262 / 0.35);
  --shadow-sheet:   0 -6px 30px oklch(30% 0.03 265 / 0.2);

  /* ===== モーション ===== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ===== z-index（6段。数字の freestyle 禁止） ===== */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;
  --z-backdrop: 300;
  --z-modal:    400;
  --z-overlay:  500;
}