/* ===========================================================================
   EverOn — Design tokens
   ---------------------------------------------------------------------------
   THIS IS THE FILE TO EDIT FIRST when changing the look of the site.

   Every colour, font size and spacing value used across the site is declared
   here once, as a CSS custom property. Change a value here and it updates
   everywhere it is used. Nothing in this file draws anything by itself.

   Naming convention:
     --c-*      colour
     --f-*      font size
     --fw-*     font weight
     --sp-*     spacing / padding
     --r-*      border radius
     --ease-*   animation easing
     --z-*      z-index layer

   NOTE: the section markup still carries some inline `style="..."` attributes
   inherited from the original design export. Those are being migrated to these
   tokens over time. When you touch a section, prefer replacing a hard-coded
   value with the matching var() from this file.
   =========================================================================== */

:root {
  /* --- Brand colours -------------------------------------------------------
     navy      the dominant dark background (hero, advantage, about, footer)
     ink       body copy on light backgrounds
     blue      the action / link blue
     orange    the accent used for eyebrows, hovers and highlights
  */
  --c-navy:          #000628;
  --c-navy-soft:     #001351;
  --c-ink:           #001351;
  --c-ink-muted:     #5a6480;

  --c-blue:          #003CF9;
  --c-blue-link:     #0022CC;
  --c-blue-deep:     #001aa3;

  --c-orange:        #F56604;
  --c-orange-bright: #FF5A00;
  --c-orange-light:  #FF9A02;
  --c-orange-warm:   #FF842F;

  --c-white:         #ffffff;
  --c-page:          #e9eaee;   /* the page background outside white sections */
  --c-surface:       #f4f5f8;   /* cards, quote blocks, author box */
  --c-surface-alt:   #eaebee;   /* image placeholders before load */
  --c-rule:          #d7dae2;   /* hairline dividers */

  /* Translucent whites, used over the navy sections */
  --c-on-dark-90:    rgba(255, 255, 255, 0.90);
  --c-on-dark-72:    rgba(255, 255, 255, 0.72);
  --c-on-dark-50:    rgba(255, 255, 255, 0.50);
  --c-on-dark-35:    rgba(255, 255, 255, 0.35);
  --c-on-dark-12:    rgba(255, 255, 255, 0.12);

  /* --- Typography ----------------------------------------------------------
     Geologica is a variable font. Weight 300 is additionally given a cursive
     axis in base.css, which is what produces the italic-ish body copy.
  */
  --font-sans: Geologica, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --f-eyebrow:   13px;   /* uppercase letterspaced labels above headings */
  --f-small:     15px;
  --f-body:      17px;
  --f-body-lg:   20px;
  --f-h4:        22px;
  --f-h3:        30px;
  --f-h2:        30px;
  --f-h2-lg:     40px;
  --f-display:   clamp(36px, 3.6vw, 52px);

  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --ls-eyebrow:  0.18em;  /* letter-spacing for uppercase labels */
  --ls-tight:    -0.02em;
  --ls-tighter:  -0.035em;

  /* --- Layout --------------------------------------------------------------
     --w-content  the wide grid used by most sections
     --w-prose    the readable measure for article body copy
  */
  --w-content:   1360px;
  --w-article:   1160px;
  --w-prose:     820px;

  --sp-gutter:   48px;    /* left/right padding of every full-width section */
  --sp-section:  110px;   /* standard vertical padding of a section */
  --nav-h:       92px;    /* fixed nav height; anchors offset against this */

  --r-sm:        8px;
  --r-md:        10px;
  --r-lg:        12px;
  --r-pill:      999px;

  /* --- Motion --------------------------------------------------------------- */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-inout:  cubic-bezier(.85, 0, .15, 1);

  /* --- Stacking order -------------------------------------------------------
     Keep these in sync — the nav is built from four stacked fixed layers.
  */
  --z-nav-shell:   100;
  --z-nav-refract: 101;
  --z-nav-content: 102;
}

/* Narrow screens: pull the big type and gutters in. */
@media (max-width: 900px) {
  :root {
    --sp-gutter:  24px;
    --sp-section: 72px;
    --f-h2-lg:    32px;
    --f-h3:       26px;
  }
}