/* ============================================================
   tokens.css — Design System Tokens (SHAREWOODZ)
   Single source for all spacing, colors, radius, shadows, fonts.
   Palette derived from Cube World forest theme.
   PLAYBOOK §10.2: No random numbers in CSS.
   ============================================================ */

:root {
  /* ── Color Palette (forest/medieval theme from assets) ── */
  --color-bg-dark:        #0d1117;
  --color-bg-mid:         #161b22;
  --color-bg-light:       #21262d;
  --color-surface:        #1c2128;
  --color-surface-hover:  #262c36;
  --color-border:         #30363d;

  --color-primary:        #3fb950;   /* Sherwood green */
  --color-primary-hover:  #56d364;
  --color-primary-active: #2ea043;
  --color-primary-dim:    rgba(63, 185, 80, 0.15);

  --color-accent:         #d4a025;   /* Gold accent */
  --color-accent-hover:   #e8b63a;

  --color-danger:         #f85149;   /* HP loss, danger */
  --color-danger-dim:     rgba(248, 81, 73, 0.15);

  --color-mana:           #58a6ff;   /* Mana blue */
  --color-mana-dim:       rgba(88, 166, 255, 0.15);

  --color-hp:             #3fb950;
  --color-hp-bg:          rgba(63, 185, 80, 0.15);

  --color-text:           #e6edf3;
  --color-text-muted:     #8b949e;
  --color-text-dim:       #484f58;

  --color-white:          #ffffff;
  --color-black:          #000000;

  /* ── Spacing (4px base scale) ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow-green: 0 0 12px rgba(63, 185, 80, 0.4);
  --shadow-glow-gold:  0 0 12px rgba(212, 160, 37, 0.4);

  /* ── Typography ── */
  /* Wordmark — the SHAREWOODZ lockup on the navbar, landing hero, loading
     screen and gate. Orbitron is the geometric, wide-tracked face that
     reads as web3/crypto rather than fantasy. */
  --font-wordmark: 'Orbitron', 'Space Grotesk', system-ui, sans-serif;
  /* Section headings on the landing page — techy but readable at length. */
  --font-crypto:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  /* In-game fantasy headings keep their own identity. */
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-md:   15px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.3s ease;
  --transition-spring: 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Z-Index Scale (PLAYBOOK §10.1) ── */
  --z-world:     0;
  --z-entity:   10;
  --z-fx:       20;
  --z-nametag:  25;
  --z-hud:      30;
  --z-touch:    35;
  --z-inventory:40;
  --z-modal:    50;
  --z-toast:    60;

  /* ── Touch Control Sizes ── */
  --touch-btn-size: 72px;
  --touch-btn-gap:   12px;

  /* ── Safe Area ── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

/* ── Google Fonts ──
   Loaded via <link> in index.html. An @import is only honoured before any
   other rule; sitting here at the end of the file it was silently dropped
   by every browser, so nothing but fallback faces ever rendered. */