/* ==========================================================================
   Design tokens
   The single source of truth for colour, glass, spacing rhythm and motion.

   The site is dark only. There is no light theme and no theme switch, so
   these values sit directly on :root rather than behind a [data-theme] hook.
   Redesigns should start here before touching any component file.
   ========================================================================== */

:root{
  /* ---------- Brand ramp ----------
     Five steps, darkest to lightest. Every blue on the site is drawn from
     this ramp; no other hue is introduced anywhere in the stylesheets. */
  --ink-black:#051923;    /* page ground */
  --deep-space:#003554;   /* raised surfaces, photo tint */
  --baltic:#006494;       /* structural accent, gradient tail */
  --steel:#0582CA;        /* mid accent */
  --fresh-sky:#00A6FB;    /* primary accent, links, focus rings */

  /* Fills. --grad-ink stays in the light half of the ramp because it is
     used with background-clip:text and has to hold contrast on --bg. */
  --grad-accent:linear-gradient(135deg,var(--fresh-sky) 0%,var(--steel) 58%,var(--baltic) 100%);
  --grad-ink:linear-gradient(100deg,#8FDDFF 0%,var(--fresh-sky) 52%,var(--steel) 100%);

  /* ---------- Semantic surfaces ---------- */
  --bg:var(--ink-black);
  --bg-sunk:#03121A;      /* bands that should read as recessed */
  --ink:#EAF3FA;
  --ink-2:#9DB8C9;
  --ink-3:#65818F;
  --accent-ink:#4FC3FF;   /* accent tuned for body-size text on --bg */

  /* ---------- Lines ----------
     Neutral lines carry structure, accent lines carry emphasis. Both are
     blue-tinted so nothing on the page reads as pure grey. */
  --line:rgba(154,205,232,.12);
  --line-strong:rgba(154,205,232,.22);
  --line-accent:rgba(0,166,251,.40);

  /* ---------- Glass ----------
     Apple-style glass is four things at once: a translucent tinted fill, a
     blur that also lifts saturation, a bright specular edge along the top,
     and a soft drop shadow underneath. The .glass class in components.css
     assembles them; these tokens let individual surfaces tune the strength.

     Glass only reads as glass when there is something behind it to refract,
     which is what the ambient wash on body::before in layout.css is for. */
  --glass-tint:rgba(0,53,84,.30);
  --glass-fill:linear-gradient(158deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.028) 44%,rgba(255,255,255,.012) 100%);
  --glass-blur:blur(26px) saturate(165%);
  --glass-edge:rgba(255,255,255,.10);
  --glass-edge-hi:rgba(255,255,255,.20);
  --glass-specular:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.045);
  --glass-shadow:0 22px 60px rgba(2,10,16,.55);

  --glow:rgba(0,166,251,.22);
  --glow-soft:rgba(0,166,251,.10);

  /* ---------- Semantic accents ---------- */
  --ok:#2BD07A;
  --warn:#E0A21A;

  /* ---------- Shape & rhythm ---------- */
  --radius:16px;
  --radius-sm:11px;
  --radius-lg:24px;
  --radius-pill:100px;
  --maxw:1180px;
  --gutter:24px;
  --section-y:120px;

  /* ---------- Motion ----------
     --ease is the standard glide for small moves. --ease-soft has a longer
     tail and is for larger travel (panels, reveals) that should settle
     rather than stop dead. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.31,1);
  --speed:.25s;
  --speed-slow:.55s;

  /* ---------- Type families ----------
     display: Norwester, uppercase only, headings
     label:   Kollektif, uppercase + wide tracking, eyebrows and chips
     sans:    Montserrat variable, body copy and UI */
  --font-display:'Norwester','Archivo Narrow',Impact,sans-serif;
  --font-label:'Kollektif','Montserrat',system-ui,sans-serif;
  --font-sans:'Montserrat',system-ui,sans-serif;

  /* Body weight. The specimen sets body copy in Montserrat Light. */
  --weight-body:300;
  --weight-medium:500;
  --weight-strong:600;

  /* Tracking. 160 in the specimen's units = 0.16em. */
  --track-label:.16em;
}