/* =====================================================================
   Westerland Consulting — Design Tokens
   Single edit point for color, type, spacing. Light + dark var sets.
   Brand palette (from assets/westerland-palette.png):
     charcoal #232529 · blue #4E7BA7 · green #6E9F83
     purple #7566A8 · silver #D6D8DC
   ===================================================================== */

:root {
  /* --- Brand constants (exact palette hexes) --- */
  --charcoal: #232529;
  --blue:     #4E7BA7;
  --green:    #6E9F83;
  --purple:   #7566A8;
  --silver:   #D6D8DC;

  /* Darker shades for depth / charcoal ramp */
  --charcoal-900: #1b1d20;
  --charcoal-800: #232529;
  --charcoal-700: #2c2f34;

  /* Aurora gradient — the signature accent (blue → green → purple) */
  --aurora-grad: linear-gradient(105deg, var(--blue) 0%, var(--green) 50%, var(--purple) 100%);

  /* --- Type --- */
  --font-display: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;

  /* Fluid type scale */
  --fs-eyebrow: 0.78rem;
  --fs-sm:   clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --fs-h3:   clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  --fs-h2:   clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
  --fs-h1:   clamp(2.6rem, 1.9rem + 3.6vw, 5rem);

  /* --- Spacing / layout --- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --container: 1140px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  /* --- Breakpoints (for reference in media queries) --- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  --header-h: 68px;
}

/* ---------------- LIGHT (default) ---------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #ffffff;
  --bg-2:      #f3f5f7;
  --surface:   #ffffff;
  --surface-2: #eef1f4;
  --text:      var(--charcoal);
  --text-muted:#565b63;
  --border:    rgba(35, 37, 41, 0.12);
  --border-strong: rgba(35, 37, 41, 0.22);

  /* text-safe accents (AA on white) + vivid brand hues for graphics */
  --accent:      #3a5c80;               /* blue, AA for links/eyebrows */
  --accent-vivid:var(--blue);
  --accent-soft: rgba(78, 123, 167, 0.12);
  --green-ink:   #4c7a60;               /* AA green on white */
  --purple-ink:  #5d4f90;               /* AA purple on white */

  --cta-bg:   var(--charcoal);
  --cta-text: #ffffff;

  --hero-glow: 0.5;
  --shadow: 0 1px 2px rgba(35,37,41,.06), 0 12px 32px -12px rgba(35,37,41,.18);
  --shadow-lift: 0 2px 4px rgba(35,37,41,.08), 0 22px 48px -18px rgba(35,37,41,.28);
}

/* ---------------- DARK ---------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        var(--charcoal-900);
  --bg-2:      var(--charcoal-800);
  --surface:   rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --text:      #eceef1;
  --text-muted:#9a9ea6;
  --border:    rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.2);

  --accent:      #9fc0e0;               /* bright blue, AA on charcoal */
  --accent-vivid:var(--blue);
  --accent-soft: rgba(120, 160, 200, 0.14);
  --green-ink:   #93c1a4;
  --purple-ink:  #ab9dd8;

  --cta-bg:   var(--silver);
  --cta-text: var(--charcoal);

  --hero-glow: 1;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 30px 60px -20px rgba(0,0,0,.7);
}