/* ============================================================
   EquiStaff — Design System tokens
   Generated 2 Oct 2026 · Saddle Pass
   Mirrors the Figma collection "EquiStaff · Colour" (Light / Deep modes)
   ------------------------------------------------------------
   THE DIVE: the site reads as depth. White and open at the surface
   where anyone can browse; progressively deeper as someone moves
   into jobs and then into the signed-in portal.
   ============================================================ */

:root {
  /* ---------- Depth ramp (the one ground scale) ---------- */
  --depth-00: #FFFFFF;   /* surface   · hero, anonymous browsing     */
  --depth-01: #F4FAFE;   /*           · proof strip, secondary bands  */
  --depth-02: #E3F1FB;   /*           · featured roles                */
  --depth-03: #BDE3FF;   /* shallows  · job listings, filters         */
  --depth-04: #5E9DC8;   /*           · job detail, apply             */
  --depth-05: #2C6591;   /* threshold · sign-in, the crossing         */
  --depth-06: #16395C;   /* deep      · portal chrome                 */
  --depth-07: #0B2545;   /* deepest   · portal ground                 */

  /* ---------- Brand ---------- */
  --blue-600: #007AB8;   /* EquiStaff blue — the action colour  */
  --blue-700: #006499;
  --sky-400:  #1CA4DA;   /* from the logo; highlights only      */
  --baby-200: #BDE3FF;
  --baby-300: #8FC7EF;
  --navy-500: #32597F;
  --navy-700: #16395C;
  --navy-900: #0B2545;
  --white:    #FFFFFF;

  /* ---------- The one warm note ----------
     Carried over from Direction B. Stops white-and-navy reading sterile.
     Never a page ground — labels, quotes, the tagline, small moments.   */
  --warm:     #F9F4ED;
  --warm-ink: #7A5312;

  /* ---------- Status · muted only, never the template neons ---------- */
  --ok-bg:   #E9F0EA;  --ok-ink:   #2E5B3A;
  --warn-bg: #FAF0DC;  --warn-ink: #7A5312;
  --err-bg:  #FBE9E6;  --err-ink:  #8C2F22;

  /* ============ SEMANTIC — LIGHT (public site) ============ */
  --surface-page:     var(--depth-00);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--depth-01);
  --surface-tint:     var(--depth-02);
  --text-primary:     var(--navy-900);
  --text-muted:       #4A6580;
  --text-link:        var(--blue-700);
  --border-subtle:    #CFE4F3;
  --border-strong:    var(--navy-500);
  --action-primary:   var(--blue-600);
  --action-hover:     var(--blue-700);
  --action-ink:       var(--white);

  /* ---------- Type ----------
     Serif pending Carrington's pick: Lora (recommended) / Libre Baskerville / EB Garamond.
     Swap --font-display in one place to change the whole site.            */
  --font-display: 'Lora', 'Libre Baskerville', Georgia, serif;
  --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Cutive Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — body never below 17px (audit finding: live site sets 13px) */
  --t-display: clamp(2.75rem, 5.5vw, 4.5rem);
  --t-h1:      clamp(2.25rem, 4vw, 3.25rem);
  --t-h2:      clamp(1.75rem, 2.6vw, 2.5rem);
  --t-h3:      1.5rem;
  --t-h4:      1.25rem;
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.9375rem;   /* 15px */
  --t-label:   0.8125rem;   /* 13px — labels/eyebrows only, never prose */

  /* ---------- Space · 4px base ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 64px; --s-9: 96px;

  /* ---------- Radius ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* ---------- Containers ---------- */
  --c-standard: 1320px;
  --c-wide:     1720px;

  /* ---------- Elevation ---------- */
  --e-1: 0 1px 2px rgba(11,37,69,.06), 0 1px 3px rgba(11,37,69,.08);
  --e-2: 0 4px 12px rgba(11,37,69,.08), 0 2px 4px rgba(11,37,69,.06);
  --e-3: 0 12px 32px rgba(11,37,69,.12);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .5s;
}

/* ============ SEMANTIC — DEEP (signed-in portal) ============
   Note the deliberate inversion on --action-primary: #007AB8 fails
   contrast on navy (2.6:1), so the CTA flips to baby blue with navy
   ink and stays the brightest element on the page. Token name is
   unchanged, so no component needs to know which end it sits on. */
[data-mode="deep"] {
  --surface-page:   var(--depth-07);
  --surface-raised: var(--depth-06);
  --surface-sunken: var(--depth-06);
  --surface-tint:   var(--depth-06);
  --text-primary:   var(--white);
  --text-muted:     var(--baby-200);
  --text-link:      var(--baby-200);
  --border-subtle:  var(--navy-500);
  --border-strong:  var(--baby-300);
  --action-primary: var(--baby-200);
  --action-hover:   var(--baby-300);
  --action-ink:     var(--navy-900);
}

/* ============================================================
   THE INK CROSSOVER — measured, not assumed.
   Depth 04 (#5E9DC8) looks dark enough for white text but is not:
       white on 04 = 2.9:1  (fails AA)
       navy  on 04 = 5.2:1  (passes)
       white on 05 = 6.1:1  (passes — first band where white wins)
   So: depth 00–04 take NAVY ink. Depth 05–07 take WHITE ink.
   Never let a text block straddle that boundary.
   ============================================================ */