/* Wanted Design System — Base Semantic Tokens
   Semantic aliases layered on top of the atomic fig-tokens.css values.
   These are the tokens components should reference. */

:root {
  /* ── Font stacks ─────────────────────────────────────────────────
     These point at the real Figma font family names.
     Upload Pretendard JP + Wanted Sans via the Font Manager to activate. */
  --font-pretendard:   "Pretendard JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-wanted-sans:  "Wanted Sans", "Wanted Sans Variable", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:         "SF Mono", ui-monospace, Menlo, monospace;

  /* ── Typography ─────────────────────────────────────────────────── */

  /* Display / Hero — Wanted Sans */
  --text-display-xl:     700 56px/1.2  var(--font-wanted-sans);
  --text-display-lg:     700 36px/1.33 var(--font-pretendard);
  --text-display-md:     700 28px/1.36 var(--font-pretendard);
  --text-display-sm:     700 24px/1.33 var(--font-pretendard);

  /* Body */
  --text-body-xl:        500 17px/1.41 var(--font-pretendard);
  --text-body-lg:        500 16px/1.5  var(--font-pretendard);
  --text-body-md:        500 14px/1.57 var(--font-pretendard);
  --text-body-sm:        500 13px/1.54 var(--font-pretendard);
  --text-body-xs:        500 12px/1.5  var(--font-pretendard);

  /* Label / UI */
  --text-label-xl:       600 17px/1.41 var(--font-pretendard);
  --text-label-lg:       600 16px/1.5  var(--font-pretendard);
  --text-label-md:       600 14px/1.57 var(--font-pretendard);
  --text-label-sm:       600 11px/1.27 var(--font-pretendard);

  /* ── Spacing ────────────────────────────────────────────────────── */
  --space-0:   0px;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   16px;
  --space-9:   18px;
  --space-10:  20px;
  --space-12:  24px;
  --space-14:  28px;
  --space-16:  32px;
  --space-20:  40px;
  --space-24:  48px;
  --space-32:  64px;
  --space-40:  80px;
  --space-48:  96px;
  --space-64:  128px;

  /* ── Border Radius ──────────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(23,23,25,0.06);
  --shadow-sm:   0 2px 4px rgba(23,23,25,0.07);
  --shadow-md:   0 4px 8px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-xl:   0 16px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-inset-border: inset 0 0 0 1px rgba(112,115,124,0.22);
  --shadow-inset-border-strong: inset 0 0 0 1.5px rgba(112,115,124,0.52);

  /* ── Z-Index ────────────────────────────────────────────────────── */
  --z-base:    0;    /* @kind other */
  --z-raised:  10;   /* @kind other */
  --z-overlay: 100;  /* @kind other */
  --z-modal:   200;  /* @kind other */
  --z-toast:   300;  /* @kind other */
  --z-tooltip: 400;  /* @kind other */

  /* ── Transitions ────────────────────────────────────────────────── */
  --transition-fast:   100ms ease;  /* @kind other */
  --transition-normal: 200ms ease;  /* @kind other */
  --transition-slow:   300ms ease;  /* @kind other */

  /* ── Component Sizes ────────────────────────────────────────────── */
  --button-height-lg:  52px;  /* @kind spacing */
  --button-height-md:  44px;  /* @kind spacing */
  --button-height-sm:  36px;  /* @kind spacing */
  --input-height-lg:   52px;  /* @kind spacing */
  --input-height-md:   44px;  /* @kind spacing */
  --hit-target-min:    44px;  /* @kind spacing */
  --bottom-nav-height: 56px;  /* @kind spacing */
  --top-bar-height:    56px;  /* @kind spacing */
}

/* ── Dark Mode ──────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --label-normal:      var(--cool-neutral-99);
    --label-neutral:     rgba(247,247,248,0.88);
    --label-alternative: rgba(247,247,248,0.61);
    --label-assistive:   rgba(247,247,248,0.28);
    --background-normal-normal:        var(--cool-neutral-10);
    --background-normal-alternative:   var(--cool-neutral-15);
    --background-elevated-normal:      var(--cool-neutral-15);
    --line-normal-normal:              rgba(174,176,182,0.22);
  }
}