/*
 * v2/tokens.css — JLPTドリル デザイントークン 正規ファイル
 * Phase 2 (2025) design system
 * このファイルが唯一の :root 定義。app.css は :root を持たない。
 */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --brand:         #A11D3B;  /* accent / primary action */
  --brand-50:      #FDF2F5;
  --brand-100:     #F8E1E6;
  --brand-300:     #E89AAB;
  --brand-hover:   #821630;

  /* ── Surfaces ───────────────────────────────────────── */
  --bg:            #FAF5EC;  /* page background */
  --bg-2:          #F4ECDC;  /* alt background */
  --bg-card:       #FFFFFF;  /* card / panel */
  --bg-subtle:     #FDF9F1;  /* subtle tint */
  --surface:       #FFFFFF;  /* alias for bg-card */

  /* ── Ink / Text ─────────────────────────────────────── */
  --ink:           #1F1612;  /* default text */
  --ink-2:         #6B5C4F;  /* secondary text (4.9:1 on --bg) */
  --ink-3:         #9C8E80;  /* tertiary — decorative only, NOT body copy */
  --ink-4:         #B0A090;  /* placeholder / disabled */
  /* legacy aliases */
  --text:          #1F1612;
  --text-muted:    #6B5C4F;
  --text-subtle:   #9C8E80;

  /* ── Borders ─────────────────────────────────────────── */
  --border:        #D6C8AC;
  --border-strong: #C7BDB0;

  /* ── Semantic Colors ─────────────────────────────────── */
  --mint:          #6FA982;  /* correct / learned */
  --mint-soft:     #E6F4EB;
  --mint-deep:     #3F6F4E;
  --peach:         #E89473;  /* review badge */
  --peach-soft:    #FDF0EB;
  --peach-deep:    #C05F3F;
  --correct:       #3F6F4E;
  --wrong:         #B5613F;
  --danger:        #B5613F;
  --sand:          #D9B777;
  --sand-soft:     #FBF5E4;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(80,50,35,.06), 0 1px 1px rgba(80,50,35,.04);
  --shadow-md:  0 2px 6px rgba(80,50,35,.06), 0 4px 14px rgba(80,50,35,.06);
  --shadow-lg:  0 4px 12px rgba(80,50,35,.08), 0 12px 32px rgba(80,50,35,.10);
  --glow-focus: 0 0 0 3px rgba(161,29,59,.28);

  /* ── Radii ───────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --r-8:         8px;
  --r-10:        10px;
  --r-14:        14px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ── Motion ──────────────────────────────────────────── */
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  260ms;
  --dur-xslow: 400ms;
  --ease-out:  cubic-bezier(0.16,1,0.3,1);
  --ease-emph: cubic-bezier(0.34,1.56,0.64,1);
  --ease-in:   cubic-bezier(0.5,0,1,1);

  /* ── Typography ─────────────────────────────────────── */
  --font-en:   'Inter', 'Helvetica Neue', sans-serif;
  --font-jp:   'Noto Sans JP', sans-serif;

  /* ── Legacy aliases (kept for back-compat) ──────────── */
  --accent:        #A11D3B;
  --accent-hover:  #821630;
  --accent-soft:   #F8E1E6;
  --accent-light:  #E89AAB;
}

/* prefers-reduced-motion: すべてのアニメーションを即時完了 */
@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;
  }
}