@layer tokens, base, components, layout, views;

@layer tokens {
  :root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-full: 999px;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;

    --font-ui: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --motion-fast: 120ms ease;
    --motion-press: 80ms ease;
    --motion-slow: 240ms ease;
    --motion-enter: 180ms ease-out;

    --motion-idle: 3.6s ease-in-out;

    --nav-width: 232px;
    --content-max: 940px;

    --topbar-height: calc(var(--space-3) * 2 + var(--art-brand));

    --art-brand: 40px;
    --art-row: 40px;
    --art-item: 44px;
    --art-tile: 88px;
    --art-hero: 140px;

    --grid-min: 130px;

    --z-nav: 10;
    --z-toast: 100;

    color-scheme: light dark;

    --bg:             light-dark(#eef4f2, #10171b);
    --surface:        light-dark(#fdfaf3, #1a2329);
    --surface-raised: light-dark(#ffffff, #223038);
    --surface-sunken: light-dark(#e4ece9, #141c21);
    --border:         light-dark(#cfdcd8, #2b3a43);
    --border-strong:  light-dark(#a8bdb7, #3e525d);

    --text:       light-dark(#14201d, #e6efec);
    --text-muted: light-dark(#566a66, #94a8a4);

    --text-faint: light-dark(#64756f, #849691);

    --accent:       light-dark(#1c7f68, #6fe0c0);
    --accent-hover: light-dark(#166654, #8bead0);
    --accent-ink:   light-dark(#ffffff, #06120f);
    --accent-soft:  light-dark(#dcf3ec, #16302a);

    --danger:       light-dark(#c4443a, #ff9a8b);
    --danger-soft:  light-dark(#fdece9, #2e1a17);
    --success:      light-dark(#1f7a58, #6fe0b0);
    --success-soft: light-dark(#dcf3ea, #16302a);
    --warn:         light-dark(#8a6116, #f0c766);
    --warn-soft:    light-dark(#fdf3df, #2c2413);

    --coin: light-dark(#9a6a10, #f5c86a);

    --rarity-common: var(--text-muted);
    --rarity-uncommon:  light-dark(#26704f, #7fe0b4);
    --rarity-scarce:    light-dark(#26669a, #6cc4f0);
    --rarity-rare:      light-dark(#6f52b8, #b8a0f0);
    --rarity-legendary: light-dark(#7d5c0d, #f0c661);

    --gloss-hi:  light-dark(rgb(255 255 255 / 72%), rgb(255 255 255 / 14%));
    --gloss-mid: light-dark(rgb(255 255 255 / 22%), rgb(255 255 255 / 5%));

    --gloss: linear-gradient(
      to bottom,
      var(--gloss-hi) 0%,
      var(--gloss-mid) 48%,
      transparent 50%,
      transparent 100%
    );

    --gloss-soft: linear-gradient(
      to bottom,
      var(--gloss-hi) 0%,
      transparent 40%
    );

    --edge-lit:  inset 0 1px 0 light-dark(rgb(255 255 255 / 85%), rgb(255 255 255 / 18%));
    --edge-seat: inset 0 -1px 0 light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 30%));

    --edge-well: inset 0 1px 3px light-dark(rgb(20 50 45 / 10%), rgb(0 0 0 / 40%));

    --glass-tint: light-dark(rgb(255 255 255 / 62%), rgb(26 35 41 / 62%));
    --glass-blur: blur(14px) saturate(1.5);

    --glow-accent: 0 0 18px light-dark(rgb(47 168 139 / 35%), rgb(111 224 192 / 28%));
    --glow-soft:   0 0 32px light-dark(rgb(47 168 139 / 18%), rgb(111 224 192 / 14%));

    --shadow-key:  light-dark(rgb(24 56 50 / 10%), rgb(0 0 0 / 50%));
    --shadow-edge: light-dark(rgb(24 56 50 / 6%), rgb(0 0 0 / 38%));

    --shadow-1: 0 2px 8px var(--shadow-key), 0 1px 2px var(--shadow-edge);
    --shadow-2: 0 10px 30px var(--shadow-key), 0 2px 8px var(--shadow-edge);
  }

  :root[data-theme='light'] { color-scheme: light; }
  :root[data-theme='dark'] { color-scheme: dark; }
}