/* ==========================================================================
   MAAC SOLUTIONS — DESIGN TOKENS
   Brand colours are taken from the MAAC Solutions logo (navy / blue / sky).
   Neutrals are steel with a navy cast; the ground is deep-ocean navy.
   ========================================================================== */

:root {
  /* ---- BRAND — sampled from the MAAC Solutions logo -----------------------
     Three blues, exactly as the mark uses them:
       navy  = "MAAC" wordmark + the outer crescent of the orb
       blue  = "SOLUTIONS" + the middle crescent
       sky   = the inner crescent highlight
     The orb is a nested-crescent form; the same crescent geometry drives the
     section marks and the delivery-route graphic.                            */
  --navy-900: #05173D;   /* deepest ground — ocean at depth */
  --navy-800: #08205C;
  --navy-700: #0A2E8C;   /* ◉ BRAND NAVY — primary action */
  --navy-600: #1240B0;
  --navy-500: #2A63C9;
  --navy-100: #E4EAF7;

  --blue-700: #2C6FA5;
  --blue-600: #357EBC;
  --blue-500: #3E8DCC;   /* ◉ BRAND BLUE — secondary */
  --blue-400: #5BA5DC;
  --blue-100: #E3F0FA;

  --sky-500:  #4FC2ED;
  --sky-400:  #64CBF1;
  --sky-300:  #7FD4F5;   /* ◉ BRAND SKY — accent, route, highlights */
  --sky-200:  #A7E4FA;
  --sky-100:  #DCF3FD;

  /* ---- INK & STEEL (neutrals carry a blue-green cast: steel in shadow) -- */
  --ink:        #05173D;   /* deep navy ground, not neutral black */
  --graphite:   #0A2145;
  --steel-900:  #1B2A45;
  --steel-800:  #2A3A57;
  --steel-700:  #45536E;
  --steel-600:  #64708A;
  --steel-500:  #8792A8;
  --steel-400:  #A8B1C2;
  --steel-300:  #C7CEDA;
  --steel-200:  #E1E6EE;
  --steel-100:  #EFF2F7;
  --paper:      #F5F7FA;          /* cool paper, keyed to the brand blues */
  --paper-warm: #FAFBFD;
  --white:      #FFFFFF;

  /* ---- SEMANTIC --------------------------------------------------------- */
  --ok:      #1F7A4C;
  --ok-bg:   #E4F3EB;
  --warn:    #A6690A;
  --warn-bg: #FBF0DA;
  --err:     #B3261E;
  --err-bg:  #FBE6E4;
  --info:    var(--navy-700);
  --info-bg: var(--navy-100);

  /* ---- SURFACES (light default) ----------------------------------------- */
  --surface:          var(--paper);
  --surface-elevated: var(--white);
  --surface-sunken:   #E8ECF3;
  --surface-inverse:  var(--ink);
  --text-primary:     var(--ink);
  --text-secondary:   var(--steel-700);
  --text-tertiary:    var(--steel-600);
  --text-on-dark:     #EAF1F8;
  --text-on-dark-dim: var(--steel-400);
  --border:           #D8DEE9;
  --border-strong:    var(--steel-400);
  --border-inverse:   rgba(255,255,255,.14);

  /* ---- TYPE ------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* fluid scale — 320px → 1600px */
  --fs-display:  clamp(2.20rem, 1.36rem + 3.55vw, 4.05rem);
  --fs-h1:       clamp(2.10rem, 1.35rem + 3.20vw, 3.60rem);
  --fs-h2:       clamp(1.75rem, 1.20rem + 2.50vw, 3.00rem);
  --fs-h3:       clamp(1.35rem, 1.09rem + 1.18vw, 1.95rem);
  --fs-h4:       clamp(1.13rem, 1.01rem + 0.55vw, 1.40rem);
  --fs-lead:     clamp(1.06rem, 0.96rem + 0.45vw, 1.31rem);
  --fs-body:     clamp(0.97rem, 0.94rem + 0.16vw, 1.06rem);
  --fs-sm:       0.875rem;
  --fs-xs:       0.785rem;
  --fs-mono-sm:  0.78rem;

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-base:  1.62;
  --lh-loose: 1.75;

  --tracking-display: -0.035em;
  --tracking-tight:   -0.018em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-stencil: 0.22em;   /* container stencil markings */

  /* ---- SPACE — 4px base, corrugation pitch at --space-7 ------------------ */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;    --space-11: 11rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);

  /* ---- LAYOUT ----------------------------------------------------------- */
  --content-max: 1440px;
  --wide-max:    1680px;
  --prose-max:   68ch;
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);

  /* ---- RADIUS — near-square. Steel doesn't have soft corners. ------------ */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- STROKE ----------------------------------------------------------- */
  --stroke-hair: 1px;
  --stroke-thin: 1.5px;
  --stroke-mid:  2px;
  --stroke-bold: 3px;

  /* ---- ELEVATION — low, physical, never floaty -------------------------- */
  --shadow-xs: 0 1px 2px rgba(5,23,61,.07);
  --shadow-sm: 0 2px 6px rgba(5,23,61,.08), 0 1px 2px rgba(5,23,61,.06);
  --shadow-md: 0 8px 22px -8px rgba(5,23,61,.17), 0 2px 6px rgba(5,23,61,.07);
  --shadow-lg: 0 24px 48px -18px rgba(5,23,61,.27), 0 4px 12px rgba(5,23,61,.09);
  --shadow-focus: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--navy-700);

  /* ---- MOTION ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-steel: cubic-bezier(.16,.84,.44,1);   /* weighty, settles hard */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
  --dur-reveal: 900ms;

  /* ---- Z ---------------------------------------------------------------- */
  --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300;
  --z-overlay: 400; --z-toast: 500;

  --header-h: 68px;
  --utility-h: 34px;
}

@media (min-width: 1024px) { :root { --header-h: 76px; } }

/* ---- DARK — viewer preference. Roles swap; the brand blues hold. -------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:          #030F2A;
    --surface-elevated: #0A1B3D;
    --surface-sunken:   #020A1D;
    --surface-inverse:  var(--paper);
    --text-primary:     #E6EDF7;
    --text-secondary:   var(--steel-400);
    --text-tertiary:    var(--steel-500);
    --text-on-dark:     #EAF1F8;
    --border:           #16294B;
    --border-strong:    var(--steel-700);
    --navy-700:         var(--sky-300);   /* actions lift to sky on a dark ground */
    --navy-800:         var(--sky-200);
    --shadow-focus: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--sky-300);
  }
}
:root[data-theme="dark"] {
  --surface:#030F2A; --surface-elevated:#0A1B3D; --surface-sunken:#020A1D;
  --surface-inverse:var(--paper); --text-primary:#E6EDF7;
  --text-secondary:var(--steel-400); --text-tertiary:var(--steel-500);
  --text-on-dark:#EAF1F8; --border:#16294B; --border-strong:var(--steel-700);
  --navy-700:var(--sky-300); --navy-800:var(--sky-200);
  --shadow-focus: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--sky-300);
}