/* ════════════════════════════════════════════════════════════════════════
   satsLAND · design tokens · v0.1
   Direction B — neon-cyberpunk.
   Single source of truth consumed by:
     - /satsland/web/*.html via <link rel="stylesheet" href="../brand/tokens.css">
     - /satsland/client/extras.html
     - /satsland/brand/system.html
   The 32-color game palette mirrors contracts/src/libs/Palette.sol::colorAt.
   Marketing-only neutrals + glows live alongside; they never leak into the
   game canvas (client/index.html stays palette-locked).
   ════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 32-color game palette (mirrors Palette.sol colorAt) ─────────── */
  --pal-00-sky-day:     #9DD8F5;
  --pal-01-sky-dusk:    #F6C394;
  --pal-02-sky-night:   #14213D;
  --pal-03-sky-dawn:    #F49AB6;
  --pal-04-grass-1:     #6FBA50;
  --pal-05-grass-2:     #3F7F2C;
  --pal-06-dirt-1:      #B07B45;
  --pal-07-dirt-2:      #6E4824;
  --pal-08-water-1:     #2A6FB0;
  --pal-09-water-2:     #4DA1E0;
  --pal-10-road:        #3A3A44;
  --pal-11-road-line:   #F5E663;   /* ★ primary brand accent */
  --pal-12-road-shadow: #222226;
  --pal-13-brick-1:     #C04040;
  --pal-14-brick-2:     #8B2424;
  --pal-15-brick-3:     #D16B6B;
  --pal-16-wood-1:      #A1683B;
  --pal-17-wood-2:      #6E4321;
  --pal-18-stone-1:     #9A9AA5;
  --pal-19-stone-2:     #5F5F6E;
  --pal-20-steel-1:     #6E8FA8;
  --pal-21-steel-2:     #3E5570;
  --pal-22-glass-1:     #82C7E8;
  --pal-23-glass-2:     #C4ECFA;
  --pal-24-neon-pink:   #F55CC1;   /* ★ secondary brand accent */
  --pal-25-neon-cyan:   #4FE7E7;   /* ★ tertiary brand accent */
  --pal-26-fire-1:      #F55C2C;
  --pal-27-fire-2:      #C42A12;
  --pal-28-smoke-1:     #C4C4C4;
  --pal-29-smoke-2:     #808080;
  --pal-30-white:       #FFFFFF;
  --pal-31-black:       #000000;

  /* Brand alias tokens (use these in component CSS, not raw palette indices) */
  --sl-yellow:    var(--pal-11-road-line);
  --sl-pink:      var(--pal-24-neon-pink);
  --sl-cyan:      var(--pal-25-neon-cyan);
  --sl-grass:     var(--pal-04-grass-1);
  --sl-fire:      var(--pal-26-fire-1);
  --sl-glass:     var(--pal-23-glass-2);

  /* ── Marketing neutrals · Direction B ────────────────────────────── */
  /* Deeper, more saturated near-black than A. Hint of plum at the bottom. */
  --sl-bg:        #06070d;
  --sl-bg-2:      #0a0c14;
  --sl-surface:   #0f1220;
  --sl-surface-2: #161a2a;
  --sl-border:    #1f2440;
  --sl-border-2:  #2c3458;
  --sl-border-3:  #3a4374;
  --sl-text:      #f1f3fb;
  --sl-text-2:    #b6bcd4;
  --sl-muted:     #7a82a0;
  --sl-muted-2:   #4d536b;

  /* ── Type scale (8 sizes) ────────────────────────────────────────── */
  --sl-fs-display:  84px;
  --sl-fs-h1:       56px;
  --sl-fs-h2:       32px;
  --sl-fs-h3:       22px;
  --sl-fs-h4:       17px;
  --sl-fs-body-lg:  17px;
  --sl-fs-body:     15px;
  --sl-fs-caption:  11px;
  --sl-fs-mono:     13px;

  --sl-font-display: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --sl-font-body:    'Geist', system-ui, sans-serif;
  --sl-font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* ── Spacing (8 steps · 4-px grid) ───────────────────────────────── */
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 24px;
  --sl-space-6: 32px;
  --sl-space-7: 56px;
  --sl-space-8: 96px;

  /* ── Radii ───────────────────────────────────────────────────────── */
  /* Direction B is square-edge by default. R-SM = 2px, anything bigger
     reads as "soft SaaS" and breaks the arcade-flyer voice. */
  --sl-radius-0:  0;
  --sl-radius-sm: 2px;
  --sl-radius-md: 4px;
  --sl-radius-lg: 8px;

  /* ── Glows + offset shadows (Direction B's signature) ────────────── */
  --sl-glow-yellow: 0 0 18px rgba(245,230,99,0.45);
  --sl-glow-pink:   0 0 18px rgba(245,92,193,0.45);
  --sl-glow-cyan:   0 0 18px rgba(79,231,231,0.45);
  --sl-offset-pink:   6px 6px 0 var(--sl-pink);
  --sl-offset-cyan:   6px 6px 0 var(--sl-cyan);
  --sl-offset-yellow: 6px 6px 0 var(--sl-yellow);
}