/* ==========================================================================
   CLIFFBROOK / NOE A. PENA — DESIGN SYSTEM TOKENS
   Single source of truth. Reference these tokens everywhere; never raw hex.
   ========================================================================== */

:root {
  /* ---- Raw palette ---------------------------------------------------- */
  --navy-900: #0B1220;   /* deepest — text on light */
  --navy-800: #0F172A;   /* primary / executive navy */
  --navy-700: #111827;   /* dark surface */
  --navy-600: #1E293B;   /* secondary surface */
  --navy-500: #334155;
  --slate-500: #475569;  /* secondary text */
  --slate-400: #64748B;
  --slate-300: #94A3B8;
  --slate-200: #CBD5E1;
  --border-100: #E2E8F0;
  --light-100: #F8FAFC;  /* light surface */
  --white: #FFFFFF;

  --gold-600: #B8884A;
  --gold-500: #C59D5F;   /* architectural gold — accent, used sparingly */
  --gold-400: #D4B57E;
  --gold-100: rgba(197, 157, 95, 0.12);

  --success: #0E9F6E;
  --warning: #D97706;
  --danger:  #DC2626;

  /* ---- Semantic tokens (light context = default page) ----------------- */
  --bg:            var(--light-100);
  --surface:       var(--white);
  --surface-alt:   var(--light-100);
  --fg:            var(--navy-900);
  --fg-muted:      var(--slate-500);
  --fg-subtle:     var(--slate-400);
  --border:        var(--border-100);
  --primary:       var(--navy-800);
  --primary-fg:    var(--white);
  --accent:        var(--gold-500);
  --accent-strong: var(--gold-600);
  --ring:          rgba(197, 157, 95, 0.55);

  /* ---- Semantic tokens for dark sections (apply .on-dark) ------------- */
  --dark-bg:        var(--navy-800);
  --dark-surface:   var(--navy-600);
  --dark-fg:        var(--light-100);
  --dark-fg-muted:  var(--slate-300);
  --dark-border:    rgba(255, 255, 255, 0.10);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Manrope", "Space Grotesk", system-ui, sans-serif;
  --font-alt:     "Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Fluid modular scale — clamp(min, fluid, max) */
  --fs-eyebrow: 0.8125rem;                          /* 13px labels */
  --fs-body-sm: 0.9375rem;                          /* 15px */
  --fs-body:    1.125rem;                            /* 18px base */
  --fs-lead:    clamp(1.25rem, 1rem + 1vw, 1.5rem);  /* 20–24px */
  --fs-h4:      clamp(1.25rem, 1rem + 1vw, 1.5rem);  /* 20–24px */
  --fs-h3:      clamp(1.5rem, 1.1rem + 1.6vw, 2rem); /* 24–32px */
  --fs-h2:      clamp(2rem, 1.3rem + 2.8vw, 3rem);   /* 32–48px */
  --fs-h1:      clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);/* 40–72px */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-heavy:   800;

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-snug:    1.4;
  --lh-body:    1.65;

  --tracking-tight:  -0.02em;  /* large headings */
  --tracking-normal: 0;
  --tracking-wide:   0.12em;   /* all-caps eyebrows */

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Section vertical rhythm — fluid */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---- Layout --------------------------------------------------------- */
  --container:    1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter:       clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* ---- Radius --------------------------------------------------------- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Elevation (subtle, layered — not heavy drop shadows) ----------- */
  --elev-1: 0 1px 2px rgba(11, 18, 32, 0.04), 0 1px 3px rgba(11, 18, 32, 0.06);
  --elev-2: 0 4px 12px rgba(11, 18, 32, 0.06), 0 2px 4px rgba(11, 18, 32, 0.04);
  --elev-3: 0 18px 40px rgba(11, 18, 32, 0.10), 0 8px 16px rgba(11, 18, 32, 0.06);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  160ms;
  --dur:       240ms;
  --dur-slow:  420ms;

  /* ---- Z-index -------------------------------------------------------- */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
}