/* =====================================================================
 * Lok-N-Blok — Design Tokens
 * Drop into /assets/css/lnb-tokens.css, @import or <link> FIRST on every page.
 * All other stylesheets consume these via var(--token).
 * v1.0 · 2026
 * ===================================================================== */
:root{
  /* ---------- COLOR · surfaces ---------- */
  --bg:          #050a07;
  --bg-2:        #0a1510;
  --card:        #0d1612;
  --card-2:      #111a15;
  --line:        #1e2a23;
  --line-soft:   #162018;

  /* ---------- COLOR · text ---------- */
  --text:        #e8ede9;
  --text-2:      #c8d5cc;
  --mute:        #8a9b90;
  --dim:         #5a6b60;

  /* ---------- COLOR · brand green ---------- */
  --g-200:       #a8f0c2;
  --g-300:       #6ee89a;   /* link, pass */
  --g-400:       #3dcc6e;   /* gradient start */
  --g-500:       #27a556;   /* gradient end, primary */
  --g-600:       #1f7a42;
  --g-700:       #143d26;
  --g-800:       #0a2e1a;

  /* ---------- COLOR · brand gold (premium / investor) ---------- */
  --gold:        #f0c35a;
  --gold-2:      #d4a843;
  --gold-dim:    rgba(240,195,90,.15);
  --gold-glow:   rgba(240,195,90,.4);

  /* ---------- COLOR · status ---------- */
  --red:         #e8a0a0;
  --red-bg:      rgba(232,84,84,.12);
  --red-line:    rgba(232,84,84,.3);
  --blue:        #89b7ff;
  --blue-bg:     rgba(137,183,255,.1);
  --blue-line:   rgba(137,183,255,.25);
  --purple:      #c5a2ff;
  --purple-bg:   rgba(197,162,255,.1);
  --purple-line: rgba(197,162,255,.25);
  --orange:      #ffc880;
  --orange-bg:   rgba(255,200,128,.1);
  --orange-line: rgba(255,200,128,.25);

  /* ---------- GRADIENTS ---------- */
  --grad-primary: linear-gradient(135deg, var(--g-500), var(--g-400));
  --grad-gold:    linear-gradient(135deg, var(--gold), var(--gold-2));
  --grad-hero:    linear-gradient(135deg,#fff 0%,var(--g-300) 50%,var(--gold) 100%);
  --grad-ambient: radial-gradient(ellipse at 20% 0%, rgba(61,204,110,.08) 0%, transparent 50%),
                  radial-gradient(ellipse at 80% 100%, rgba(240,195,90,.05) 0%, transparent 50%);

  /* ---------- SPACING · 4px grid ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------- RADIUS ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ---------- TYPE · families ---------- */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE · scale ---------- */
  --fs-display: 3.75rem;   /* 60 */
  --fs-h1:      2.5rem;    /* 40 */
  --fs-h2:      1.75rem;   /* 28 */
  --fs-h3:      1.25rem;   /* 20 */
  --fs-h4:      1.0625rem; /* 17 */
  --fs-body:    0.9375rem; /* 15 */
  --fs-sm:      0.8125rem; /* 13 */
  --fs-xs:      0.75rem;   /* 12 */
  --fs-label:   0.6875rem; /* 11  — uppercase labels */
  --fs-mono:    0.8125rem;

  --lh-tight:       1.1;
  --lh-snug:        1.3;
  --lh-body:        1.6;

  --tracking-tight:  -0.02em;
  --tracking-label:   0.12em;
  --tracking-kicker:  0.18em;

  /* ---------- ELEVATION ---------- */
  --shadow-sm:      0 2px 8px rgba(0,0,0,.18);
  --shadow-md:      0 8px 28px rgba(0,0,0,.28);
  --shadow-lg:      0 20px 60px rgba(0,0,0,.5);
  --shadow-primary: 0 8px 22px rgba(39,165,86,.3);
  --shadow-gold:    0 8px 22px rgba(240,195,90,.3);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
}

/* Mobile type scale bump-down */
@media (max-width: 640px){
  :root{
    --fs-display: 2.25rem;
    --fs-h1:      1.875rem;
    --fs-h2:      1.4rem;
    --fs-h3:      1.125rem;
  }
}