/* ==========================================================================
   4SYBER — Design Tokens
   Generated from docs/brand-guidelines.md v2.0 — "Calm Architect"

   Light-first. White and light grey do the work; ink carries the type; a single
   restrained cobalt marks action and state. The palette should read as
   transparency and order, never as threat.
   ========================================================================== */

:root {
  /* ---- Grounds -------------------------------------------------------- */
  --paper:       #FFFFFF;  /* primary canvas */
  --mist:        #F5F7F9;  /* alternating band, cards on paper */
  --fog:         #EDF0F4;  /* insets, cards on mist */
  --line:        #E3E8EF;  /* hairlines */
  --line-strong: #CBD3DE;  /* emphasised and input borders */

  /* ---- Type ------------------------------------------------------------ */
  --ink:      #0E1420;  /* headings and primary text — 18.4:1 on paper */
  --graphite: #3D4757;  /* long-form body — 9.4:1 */
  --slate:    #4E596B;  /* secondary and meta — 7.1:1 */

  /* ---- Accent ---------------------------------------------------------- */
  /* One accent. It marks action and state, never decorates a surface. */
  --accent:        #2B4ACF;  /* 7.0:1 on paper; white on it is also 7.0:1 */
  --accent-strong: #1F38A8;  /* hover / pressed */
  --accent-tint:   #EEF2FE;  /* the one tinted band, at the point of conversion */
  --accent-line:   #C7D2F7;

  /* Primary buttons are Ink, not accent: on a light page the darkest element is
     the most important one, which keeps the accent budget for state. */
  --on-accent: #FFFFFF;

  /* ---- Inverse (the footer, and nothing else) --------------------------- */
  --ink-surface: #0E1420;
  --on-ink:      #E8ECF2;  /* 15.5:1 */
  --on-ink-mute: #96A1B2;  /* 7.1:1  */
  --accent-on-ink: #7E97F5;

  /* ---- Severity (report UI only) ---------------------------------------- */
  --sev-critical: #C4262C;
  --sev-high:     #B45309;
  --sev-medium:   #A16207;
  --sev-low:      #15803D;

  /* ---- Contextual surface roles ---------------------------------------- */
  --surface:         var(--paper);
  --on-surface:      var(--ink);
  --on-surface-body: var(--graphite);
  --on-surface-mute: var(--slate);
  --hairline:        var(--line);
  --raised-surface:  var(--mist);
  --mark:            var(--accent);

  /* ---- Type scale ------------------------------------------------------ */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Restrained: display type tops out at 72px, not 96px, and tracking is
     tightened far less than in a high-drama layout. */
  --fs-display-xl: clamp(2.375rem, 1.55rem + 3.70vw, 4.50rem);
  --fs-display-l:  clamp(2.00rem, 1.50rem + 2.22vw, 3.25rem);
  --fs-h2:         clamp(1.625rem, 1.35rem + 1.22vw, 2.3125rem);
  --fs-h3:         clamp(1.375rem, 1.26rem + 0.50vw, 1.6875rem);
  --fs-h4:         clamp(1.125rem, 1.08rem + 0.20vw, 1.25rem);
  --fs-body-l:     clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem);
  --fs-body:       clamp(1.00rem, 0.98rem + 0.09vw, 1.0625rem);
  --fs-small:      0.875rem;
  --fs-eyebrow:    clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --fs-label:      clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);

  --tr-display-xl: -0.032em;
  --tr-display-l:  -0.028em;
  --tr-h2:         -0.022em;
  --tr-h3:         -0.017em;
  --tr-h4:         -0.011em;
  --tr-body:       -0.004em;
  --tr-eyebrow:     0.14em;
  --tr-label:       0.05em;

  --lh-display-xl: 1.04;
  --lh-display-l:  1.08;
  --lh-h2:         1.16;
  --lh-h3:         1.24;
  --lh-h4:         1.34;
  --lh-body:       1.62;
  --lh-body-l:     1.60;

  /* ---- Space ------------------------------------------------------------ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --section-y:  clamp(4rem, 2.4rem + 6.5vw, 8.5rem);
  --gutter:     clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --measure:    68ch;
  --max-w:      82rem;
  --max-w-wide: 92rem;

  /* ---- Lines / radii ----------------------------------------------------- */
  --control-h: 3.35rem;  /* every button and the CTA pair share this height */
  --radius:    4px;
  --radius-lg: 10px;
  --border:    1px;

  /* ---- Elevation --------------------------------------------------------- */
  /* Light interfaces need real elevation, but it must stay almost invisible. */
  --shadow-xs: 0 1px 2px rgba(14, 20, 32, 0.05);
  --shadow-sm: 0 1px 3px rgba(14, 20, 32, 0.06), 0 1px 2px rgba(14, 20, 32, 0.04);
  --shadow-md: 0 6px 20px -6px rgba(14, 20, 32, 0.10), 0 2px 6px -2px rgba(14, 20, 32, 0.05);
  --shadow-lg: 0 20px 52px -20px rgba(14, 20, 32, 0.18);

  /* ---- Motion ------------------------------------------------------------ */
  /* Calm: no overshoot, and slightly longer settles than a high-energy brand. */
  --ease:       cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:  0.15s;
  --dur-ui:     0.24s;
  --dur-reveal: 0.68s;

  --z-overlay: 200;
  --z-nav:     300;
}

/* ==========================================================================
   Surface contexts

   Class names stayed neutral through the dark and ocean experiments, so they
   describe position rather than colour and did not need renaming again:

   base   — the primary canvas (paper)
   raised — one step up, alternates with base (mist)
   tint   — the single accent band, at the point of conversion
   deep   — the footer, the page's one dark anchor
   ========================================================================== */

.on-base {
  --surface:         var(--paper);
  --on-surface:      var(--ink);
  --on-surface-body: var(--graphite);
  --on-surface-mute: var(--slate);
  --hairline:        var(--line);
  --raised-surface:  var(--mist);
  --mark:            var(--accent);
  background: var(--surface);
  color: var(--on-surface);
}

.on-raised {
  --surface:         var(--mist);
  --on-surface:      var(--ink);
  --on-surface-body: var(--graphite);
  --on-surface-mute: var(--slate);
  --hairline:        var(--line);
  --raised-surface:  var(--paper);
  --mark:            var(--accent);
  background: var(--surface);
  color: var(--on-surface);
}

.on-tint {
  --surface:         var(--accent-tint);
  --on-surface:      var(--ink);
  --on-surface-body: var(--graphite);
  --on-surface-mute: var(--slate);
  --hairline:        var(--accent-line);
  --raised-surface:  var(--paper);
  --mark:            var(--accent);
  background: var(--surface);
  color: var(--on-surface);
}

.on-deep {
  --surface:         var(--ink-surface);
  --on-surface:      var(--on-ink);
  --on-surface-body: var(--on-ink);
  --on-surface-mute: var(--on-ink-mute);
  --hairline:        rgba(255, 255, 255, 0.10);
  --raised-surface:  #171E2C;
  --mark:            var(--accent-on-ink);
  background: var(--surface);
  color: var(--on-surface);
}