/* =============================================================================
   LVL2 Design Tokens — single source of truth
   Source: /lvl2/app/globals.css (:root + .dark) and /lvl2/app/dashboard/styles/lvl2-ui.css
   ============================================================================= */

:root {
  /* ─── Brand palette — the 5-color hard rule ─────────────────────────────── */
  --brand-cyan:        #00E5FF;
  --brand-green:       #00D68F;
  --brand-magenta:     #FF0099;
  --brand-yellow:      #FFD600;   /* caution */
  --brand-red:         #FF4757;

  /* Supporting */
  --brand-cyan-dark:   #00B8CC;
  --brand-red-dark:    #7F1D1D;
  --brand-blue:        #2563EB;
  --brand-orange:      #F97316;
  --brand-acid:        #C8FF00;
  --brand-acid-strong: #A8D600;
  --brand-acid-ink:    #171C05;
  --brand-graphite:    #27241F;
  --brand-graphite-soft:#3A3530;
  --brand-earth:       #C0B8AD;
  --brand-earth-strong:#9A9088;

  /* ─── Semantic aliases ──────────────────────────────────────────────────── */
  --primary:           var(--brand-cyan);
  --accent:            var(--brand-magenta);
  --success:           var(--brand-green);
  --warning:           var(--brand-yellow);
  --error:             var(--brand-red);

  /* ─── Surface system — warm cream parchment (light) ─────────────────────── */
  --background:        #FFFEFC;
  --foreground:        #3A3530;
  --foreground-muted:  rgba(80,74,66,0.62);
  --paper:             #FFFFFF;
  --surface-1:         #FCFBF9;
  --surface-2:         #F7F5F2;
  --surface-3:         #EFEBE6;
  --card-bg:           var(--paper);
  --card-border:       color-mix(in srgb, var(--foreground) 10%, transparent);
  --border:            rgba(0,0,0,0.09);
  --border-strong:     rgba(0,0,0,0.18);
  --tone-slate:        #C0B8AD;
  --grid-tint:         #CDC5BA;

  /* ─── Type stack ────────────────────────────────────────────────────────── */
  --font-display: 'Anton', Impact, 'Arial Black', sans-serif;         /* Headlines — condensed, brutal, loud */
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Kickers, labels, meta */
  --font-marker:  'Permanent Marker', 'Anton', sans-serif;            /* Rare — hand-scrawl accent */

  /* ─── Radius scale — canonical 6 values only ────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;    /* retro default */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 14px;   /* surfaces */
  --radius-pill: 999px;

  /* ─── Shadows — retro hard-offset is the house style ────────────────────── */
  --shadow-retro:       4px 4px 0 0 rgba(0,0,0,0.18);
  --shadow-retro-hover: 2px 2px 0 0 rgba(0,0,0,0.18);
  --shadow-card:        0 8px 24px rgba(26,26,46,0.06);
  --shadow-hover:       0 14px 32px rgba(26,26,46,0.10);

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

  /* ─── Dashboard tones (what .lv-tone-* classes set) ─────────────────────── */
  --dashboard-tone-success:    var(--brand-green);
  --dashboard-tone-caution:    var(--brand-yellow);
  --dashboard-tone-attention:  var(--brand-yellow);
  --dashboard-tone-info:       var(--brand-cyan);
  --dashboard-tone-red:        var(--brand-red);
  --dashboard-tone-dark-red:   var(--brand-red-dark);
  --dashboard-tone-premium:    #E8B04C;
  --dashboard-tone-art-cyan:   var(--brand-cyan);
  --dashboard-tone-neutral:    var(--brand-earth-strong);

  /* Tone indirection — set on a wrapper to theme subtree */
  --tone-color:         var(--dashboard-tone-neutral);
  --tone-on-solid:      #0A0A12;
  --tone-border:        color-mix(in srgb, var(--tone-color) 38%, var(--border));
  --tone-border-strong: color-mix(in srgb, var(--tone-color) 62%, var(--border));
  --tone-surface:       color-mix(in srgb, var(--tone-color) 12%, var(--card-bg));
  --tone-shadow:        color-mix(in srgb, var(--tone-color) 30%, transparent);

  /* Public chrome aliases — nav overlays image art, footer uses the cinematic dark treatment. */
  --public-ink:          #0A0A0C;
  --public-on-accent:    #FFFFFF;
  --public-app-tile-bg:  #1A0D08;
  --public-footer-bg:    #0E1014;
  --public-footer-ink:   #F3F2EF;
  --on-image-foreground: #FCFBF9;
  --public-on-image-shadow: 0 2px 14px rgba(0,0,0,0.58);
}

/* Dark mode — deep graphite */
.dark, [data-theme="dark"] {
  --background: #070707;
  --foreground: #F0EDEF;
  --foreground-muted: rgba(240,237,239,0.58);
  --paper: #141416;
  --surface-1: #161618;
  --surface-2: #1D1D21;
  --surface-3: #2A2A30;
  --card-bg: #17171A;
  --card-border: color-mix(in srgb, var(--foreground) 16%, transparent);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.22);
  --grid-tint: #626068;
  --shadow-card: 0 10px 26px rgba(0,0,0,0.42);
  --shadow-hover: 0 16px 34px rgba(0,0,0,0.50);
}

/* Tone presets — apply to any container to scope color */
.tone-success    { --tone-color: var(--brand-green);   --tone-on-solid: #062E1D; }
.tone-caution    { --tone-color: var(--brand-yellow);  --tone-on-solid: #1A1207; }
.tone-info       { --tone-color: var(--brand-cyan);    --tone-on-solid: #022A32; }
.tone-cyan       { --tone-color: var(--brand-cyan);    --tone-on-solid: #022A32; }
.tone-magenta    { --tone-color: var(--brand-magenta); --tone-on-solid: #FFFFFF; }
.tone-red        { --tone-color: var(--brand-red);     --tone-on-solid: #FFFFFF; }
.tone-premium    { --tone-color: #E8B04C;              --tone-on-solid: #1A1207; }
.tone-neutral    { --tone-color: var(--brand-earth-strong); --tone-on-solid: #FFFFFF; }