/* ============================================================
   LeanEdge Resources — Design Tokens
   Theme: SLATE & CRIMSON — high-contrast, engineered, brutalist.
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand palette · Slate & Crimson ---- */
  --le-ink:        #0F172A;  /* deep charcoal slate — primary text */
  --le-navy:       #1F3A5F;  /* primary slate navy — branding, solid sections */
  --le-navy-deep:  #12253F;  /* darker slate navy — hover states */
  --le-navy-900:   #0F172A;  /* near-black slate — deepest panels */
  --le-slate:      #4A6DA5;  /* secondary periwinkle/slate blue */
  --le-slate-soft: #8FA8D0;  /* lighter slate for accents on dark */
  --le-red:        #C0392B;  /* accent crimson/vermillion — strictly CTAs & active */
  --le-red-deep:   #9E2E22;  /* crimson hover */

  /* ---- Neutrals ---- */
  --le-paper:      #FFFFFF;
  --le-light:      #F8FAFC;  /* light neutral — page background */
  --le-sand:       #F5F2EB;  /* warm industrial sand — alt sections, bento */
  --le-sand-deep:  #ECE6DA;
  --le-grey:       #EEF1F5;  /* light slate grey */
  --le-line:       #D9DFE7;  /* slate hairlines on light (≈ slate-200/300) */
  --le-line-soft:  #E6EAF0;
  --le-line-dark:  rgba(255,255,255,0.14); /* hairlines on dark */

  /* ---- Text ---- */
  --le-body:       #3D4A5C;  /* body text on light — slate */
  --le-muted:      #64748B;  /* muted captions — slate-500 */
  --le-on-dark:    #E6ECF4;  /* body text on dark */
  --le-on-dark-mut:#9DB0CC;  /* muted on dark */

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---- Radius · HARD GEOMETRY — everything is 0 ---- */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0;

  /* ---- Container ---- */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Shadow (used sparingly — brutalist favours borders) ---- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 10px 30px rgba(15,23,42,0.10);
  --shadow-lg: 0 28px 64px rgba(15,23,42,0.20);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
}