/* Elim Game · 양세찬 게임 — design tokens (single source).
   Primitives first, then semantic roles. design.css consumes only the semantic
   layer plus the spacing / radius / type / motion scales. Light theme only (no
   dark-mode switch in scope). */

:root {
  /* ---------- Primitive colour ---------- */
  --paper-50:  #fbf7f0;
  --paper-100: #f5eee2;
  --paper-200: #ebe1cf;
  --paper-300: #d8c9b0;

  --ink-900: #221c17;
  --ink-700: #463d35;
  --ink-500: #675c52;

  --coral-100: #ffe4da;
  --coral-300: #ffa58b;
  --coral-500: #ef6b4d;
  --coral-600: #c8432b;
  --coral-700: #a23421;

  --mint-100: #daf3e9;
  --mint-300: #8fdcc1;
  --mint-500: #3dbb93;
  --mint-700: #1e7a63;
  --mint-800: #165e4c;

  --butter-100: #fff2c9;
  --butter-300: #ffd866;
  --butter-800: #6b5200;

  --rose-100: #fde3e7;
  --rose-700: #a8203a;

  --white: #ffffff;

  /* ---------- Semantic colour ---------- */
  --color-bg:            var(--paper-100);
  --color-bg-dot:        var(--paper-300);
  --color-surface:       var(--paper-50);
  --color-sunken:        var(--paper-200);
  --color-line:          var(--ink-900);     /* drawn outlines: cards, controls */
  --color-line-soft:     var(--paper-300);   /* dividers inside a surface */
  --color-text:          var(--ink-900);
  --color-text-muted:    var(--ink-500);
  --color-focus:         var(--ink-900);
  --color-focus-halo:    var(--butter-300);

  --color-primary:        var(--coral-600);  /* create room, submit, guess */
  --color-primary-press:  var(--coral-700);
  --color-on-primary:     var(--white);
  --color-answer:         var(--mint-700);   /* 예 / 아니오 / 정답 */
  --color-answer-press:   var(--mint-800);
  --color-on-answer:      var(--white);
  --color-secondary:      var(--paper-50);
  --color-on-secondary:   var(--ink-900);
  --color-disabled-bg:    var(--paper-200);
  --color-disabled-text:  var(--ink-500);

  --color-turn-me:        var(--coral-500);  /* my turn: loudest field on screen */
  --color-turn-them:      var(--mint-300);   /* opponent's turn */
  --color-turn-judge:     var(--butter-300); /* guess challenge in progress */
  --color-on-turn:        var(--ink-900);

  --color-card-back:      var(--coral-500);
  --color-card-back-alt:  var(--coral-300);

  --color-waiting-bg:     var(--butter-100);
  --color-waiting-text:   var(--butter-800);
  --color-success-bg:     var(--mint-100);
  --color-success-text:   var(--mint-800);
  --color-error-bg:       var(--rose-100);
  --color-error-text:     var(--rose-700);
  --color-notice-bg:      var(--butter-300); /* 관전자 전용 notice */
  --color-scrim:          rgb(34 28 23 / 0.55);

  /* ---------- Spacing (one scale; three distances) ---------- */
  --space-1: 4px;   /* inside a tight unit */
  --space-2: 8px;
  --space-3: 12px;  /* related content */
  --space-4: 16px;
  --space-5: 24px;  /* between groups */
  --space-6: 32px;
  --space-7: 48px;  /* major break */
  --space-8: 64px;

  /* ---------- Radius (concentric: inner = outer − inset, floor 8) ---------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Stroke and lift ---------- */
  --stroke:        2px;
  --stroke-strong: 3px;
  --lift:          4px;   /* hard "tabletop" lip under cards and buttons */
  --lift-pressed:  1px;
  --shadow-lift:   0 var(--lift) 0 var(--color-line);
  --shadow-lift-pressed: 0 var(--lift-pressed) 0 var(--color-line);
  --shadow-float:  0 var(--space-2) var(--space-5) rgb(34 28 23 / 0.18);

  /* ---------- Type ---------- */
  /* Display: distinctive, rounded-geometric Korean headline voice.
     Desired: Do Hyeon / BM Dohyeon. Fallbacks are real local Korean faces. */
  --font-display: "BM Dohyeon", "Do Hyeon", "BM DoHyeon OTF",
                  "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  /* UI: highly readable Korean text face. */
  --font-ui: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
             "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-mono-code: "SF Mono", ui-monospace, "Menlo", monospace; /* room code */

  --weight-regular: 400;
  --weight-medium:  500;

  --text-xs:  13px;  /* captions only, never body */
  --text-sm:  15px;
  --text-md:  17px;  /* body */
  --text-lg:  20px;
  --text-xl:  26px;  /* display — section headings */
  --text-2xl: 34px;  /* display — turn banner (mobile) */
  --text-3xl: 44px;  /* display — turn banner (desktop), result */
  --text-4xl: 64px;  /* display — entry title */
  /* Secret-word size scales with the card's own container */
  --text-word: clamp(40px, 13cqi, 76px);

  --leading-tight: 1.15;
  --leading-body:  1.55;
  --tracking-display: -0.01em;

  /* ---------- Layout ---------- */
  --control-min: 48px;      /* every interactive control */
  --control-lg:  64px;      /* answer buttons */
  --content-max: 1120px;
  --rail-width:  288px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-press:   90ms;   /* button press feedback */
  --dur-toast:   180ms;  /* toast in */
  --dur-turn:    260ms;  /* turn banner change */
  --dur-dialog:  200ms;  /* dialog open */
  --dur-reveal:  480ms;  /* result card flip */
  --stagger-reveal: 140ms;
  /* v3 motion vocabulary: deal · stamp · handoff · confirm · nudge · settle.
     Figma: Motion collection (Default / Reduced motion modes). */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --dur-deal:    320ms;  /* cards/seats arrive at the table */
  --stagger-deal: 70ms;
  --dur-stamp:   280ms;  /* ready pill, winner, judged guess */
  --dur-confirm: 220ms;  /* answer recorded, same turn */
  --dur-nudge:   260ms;  /* incorrect guess, form error */
  --dur-status:  220ms;  /* pause / reconnect banner settles in */
  --dur-confetti: 1100ms; /* one paper burst on results */
  --dur-guide-element: 420ms; /* one guide illustration move */
  --dur-guide-scene: 1500ms;  /* budget: a guide scene is still after this */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press:  0ms;
    --dur-toast:  0ms;
    --dur-turn:   0ms;
    --dur-dialog: 0ms;
    --dur-reveal: 0ms;
    --stagger-reveal: 0ms;
    --dur-deal: 0ms;
    --stagger-deal: 0ms;
    --dur-stamp: 0ms;
    --dur-confirm: 0ms;
    --dur-nudge: 0ms;
    --dur-status: 0ms;
    --dur-confetti: 0ms;
    --dur-guide-element: 0ms;
    --dur-guide-scene: 0ms;
  }
}

/* v2: stacking order as tokens (mirrors the runtime additions in public/tokens.css). */
:root {
  --z-tray: 2;
  --z-overlay: 3;
  --z-feedback: 20;
  --z-toast: 50;
  --z-skip: 100;
}

/* Runtime additions. Claude's authored tokens above remain the source. */
@font-face {
  font-family: "Elim Do Hyeon";
  src: url("/fonts/DoHyeon-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --font-display: "Elim Do Hyeon", "BM Dohyeon", "Do Hyeon", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --z-tray: 2;
  --z-overlay: 3;
  --z-feedback: 20;
  --z-toast: 50;
  --z-skip: 100;
}