/* tokens.css — MapleStory Idle game-mirror palette.
   Sampled from reference/screenshots/ — rationale in reference/GAME-STYLE.md.
   Charcoal window, DARKER inset cards (game inverts the usual dark-web order),
   cyan = interactive, gold = data emphasis (+gains!), lime = commit/success,
   red = danger. Soft shadows allowed (the game bevels everything). */

:root {
  color-scheme: dark;

  /* surfaces — game window chrome */
  --backdrop:  oklch(16% 0.006 280);   /* page behind the window */
  --surface-0: oklch(24.5% 0.008 280); /* window / panel charcoal #26262b */
  --surface-inset: oklch(20% 0.008 280); /* inset cards #1b1b1f — darker than panel */
  --surface-1: oklch(27% 0.008 280);   /* card on panel */
  --surface-2: oklch(31% 0.009 280);   /* raised: segments, rows #333338 */
  --surface-3: oklch(36% 0.009 280);   /* highest */
  --line:      oklch(36% 0.009 280);
  --line-soft: oklch(30% 0.008 280);

  /* text — tiers tuned for readability on the dark surfaces: text-2 carries
     descriptions and must stay clearly legible; text-3 is the floor for any
     text and still clears ~5.5:1 on cards (was 58%, too dim at small sizes) */
  --text-1: oklch(98% 0.002 280);
  --text-2: oklch(83% 0.008 280);
  --text-3: oklch(68% 0.01 280);

  /* light showcase pane (Hero Power left panel) */
  --lite-bg: oklch(99% 0.002 250);
  --lite-bg-sky: linear-gradient(135deg, oklch(97% 0.015 240), oklch(90% 0.05 235));
  --lite-text: oklch(24% 0.01 280);
  --lite-text-2: oklch(42% 0.012 280);
  --lite-line: oklch(88% 0.008 250);

  /* cyan — interactive */
  --accent:       oklch(76% 0.117 215);              /* #29c5e6 */
  --accent-hover: oklch(81% 0.11 215);
  --accent-deep:  oklch(66% 0.115 220);
  --accent-tint:  oklch(76% 0.117 215 / 0.12);
  --accent-line:  oklch(76% 0.117 215 / 0.4);
  --accent-num:   oklch(80% 0.1 210);                /* numeric cyan #40d1ee */
  --on-accent:    oklch(99% 0.002 280);

  /* gold — data emphasis, +gains, progress, option names */
  --gold:      oklch(87% 0.155 92);                  /* #ffd23f */
  --gold-deep: oklch(78% 0.14 80);                   /* #f0b23a */
  --gold-tint: oklch(87% 0.155 92 / 0.12);
  --on-gold:   oklch(28% 0.03 90);

  /* lime — commit / success */
  --lime:      oklch(85% 0.21 128);                  /* #a9e21e */
  --lime-deep: oklch(78% 0.2 130);
  --lime-tint: oklch(85% 0.21 128 / 0.12);
  --on-lime:   oklch(24% 0.05 130);

  /* red — danger / loss */
  --danger:      oklch(63% 0.21 20);                 /* #f43b4e */
  --danger-tint: oklch(63% 0.21 20 / 0.12);

  /* rarity pills */
  --rar-epic:      oklch(62% 0.21 305);              /* #b45cf0 */
  --rar-unique:    oklch(80% 0.15 80);               /* #f5b52e */
  --rar-legendary: oklch(72% 0.17 150);              /* #2fc266 */
  --rar-mystic:    oklch(60% 0.2 15);                /* #e6394f */

  /* semantic aliases used by components */
  --pos: var(--gold);          /* game shows positive gains in GOLD */
  --neg: var(--danger);
  --success: var(--lime);
  --warning: var(--gold-deep);

  /* encounter-split identity colors. --split-normal is deliberately orange,
     not gold (gold = plain math numbers). --weight-hl is the RESERVED trace
     color for split shares — keep in sync with WEIGHT_COLOR in js/app.js;
     it is excluded from the stat dep palette there. */
  --split-normal: #ff9f43;
  --weight-hl: #ff6b81;

  /* type — modern neutral grotesque; mono reserved for math/formula blocks */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --text-body: 0.875rem;
  --text-small: 0.8125rem;
  --text-micro: 0.75rem; /* labels only — sentences never render below --text-small */
  --text-display: 1.75rem;
  --text-hero: 2.25rem;
  --tracking-display: -0.01em;
  --tracking-label: 0.07em;

  /* shape — modern: crisp small radii on controls, generous on containers */
  --radius-input: 0.5rem;
  --radius-btn: 0.5625rem;
  --radius-card: 0.875rem;
  --radius-panel: 1.125rem;
  --radius-pill: 999px;

  /* depth — soft game-style shadows */
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.2);
  --shadow-window: 0 12px 40px oklch(0% 0 0 / 0.45);
  --glow-cta: 0 0 14px var(--accent-tint);

  /* motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}