/* ============================================================================
   VARIABLES.CSS  ·  The "Signal & Slate" Design System
   ----------------------------------------------------------------------------
   This is the single source of truth for the whole site's look.
   Change a value here and it updates everywhere. Nothing else hard-codes colours,
   fonts, or spacing — always reference these tokens (e.g. var(--color-coral)).

   SECTIONS:
     1. Colour tokens (light theme)
     2. Dark theme overrides
     3. Typography tokens
     4. Spacing scale (8-point system)
     5. Radii, borders, shadows
     6. Layout + motion tokens
   ========================================================================== */

:root {
  /* --- 1. COLOUR (light theme) ------------------------------------------- */
  --color-pine:        #22463C;  /* Brand anchor — headers, dark bands        */
  --color-pine-light:  #6BA48F;  /* Softer pine for accents on dark           */
  --color-coral:       #FF5A3C;  /* THE SIGNAL — primary CTAs, key highlights */
  --color-ochre:       #E0A44A;  /* Premium warm accent — badges, awards      */

  --color-ink:         #1C1B18;  /* Primary text                              */
  --color-muted:       #6B655C;  /* Secondary text                           */
  --color-faint:       #8A857C;  /* Tertiary text, meta labels               */

  --color-paper:       #F7F4EF;  /* Page background (warm neutral "slate")    */
  --color-surface:     #FFFFFF;  /* Cards, raised surfaces                    */
  --color-surface-alt: #F1EFE8;  /* Subtle fills, logo tiles                  */
  --color-border:      #E4DED4;  /* Hairline borders                         */

  --color-success:     #2F8B62;  /* Verified / available                      */
  --color-warning:     #D9902F;
  --color-error:       #C23B22;

  /* Semantic aliases — use these in components so intent stays readable */
  --bg:            var(--color-paper);
  --bg-surface:    var(--color-surface);
  --text:          var(--color-ink);
  --text-muted:    var(--color-muted);
  --accent:        var(--color-coral);
  --brand:         var(--color-pine);
  --border:        var(--color-border);

  /* --- 3. TYPOGRAPHY ----------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* headlines */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif; /* body + UI */
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace; /* labels  */

  /* Modular scale (~1.25). Uses clamp() so type is responsive with no media queries. */
  --fs-hero:  clamp(2.5rem, 5.5vw, 4.5rem);   /* 40 → 72px  H1                */
  --fs-h2:    clamp(2rem, 3.5vw, 3rem);       /* 32 → 48px                    */
  --fs-h3:    clamp(1.35rem, 2vw, 1.6rem);    /* ~22 → 26px                   */
  --fs-lg:    1.25rem;                         /* 20px  lead paragraphs        */
  --fs-body:  1.0625rem;                       /* 17px  base body              */
  --fs-sm:    0.9375rem;                       /* 15px                         */
  --fs-xs:    0.8125rem;                       /* 13px  meta                   */
  --fs-mono:  0.75rem;                         /* 12px  eyebrows / labels      */

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

  /* --- 4. SPACING (strict 8-point system) -------------------------------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-7: 4rem;     /* 64px */
  --space-8: 6rem;     /* 96px */
  --space-9: 8rem;     /* 128px */
  --section-y: clamp(4rem, 9vw, 8rem);  /* vertical rhythm between sections   */

  /* --- 5. RADII / BORDERS / SHADOWS -------------------------------------- */
  --radius-btn:   8px;
  --radius-card:  16px;
  --radius-media: 12px;
  --radius-pill:  999px;

  --shadow-sm: 0 1px 2px rgba(28, 27, 24, 0.04);
  --shadow-md: 0 6px 20px rgba(28, 27, 24, 0.07);
  --shadow-lg: 0 16px 44px rgba(28, 27, 24, 0.12);

  /* --- 6. LAYOUT + MOTION ------------------------------------------------- */
  --container:  1200px;   /* max content width                               */
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --nav-h:      72px;

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);  /* smooth "out-expo" feel    */
  --dur-fast:   0.18s;
  --dur:        0.35s;
  --dur-slow:   0.6s;
}

/* --- 2. DARK THEME ------------------------------------------------------- */
/* Activated by [data-theme="dark"] on <html> (toggle) — see js/main.js.
   Only the tokens that change are overridden; everything else cascades. */
:root[data-theme="dark"] {
  --color-ink:         #F1ECE3;
  --color-muted:       #B5AE9F;
  --color-faint:       #8F887A;

  --color-paper:       #14130F;
  --color-surface:     #1E1C17;
  --color-surface-alt: #262219;
  --color-border:      #34302A;

  --color-pine:        #6BA48F;   /* lighten pine so it reads on dark         */
  --color-coral:       #FF6B4A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55);
}