/* ===========================================================================
   Etetos — site tokens
   ---------------------------------------------------------------------------
   DELIBERATELY DIFFERENT from the Syntek app's design system (warm cream +
   burnt orange). This is the company's own face; that was a customer's tool.

   Every colour below was sampled from the owner's own assets — the hero video
   and the two untinted headshots — with scripts/palette.mjs. The system is a
   complementary pair: a deep blue/cyan field with a coral-orange accent. In
   the video the truck is the orange and everything else is the blue; the two
   portraits split along the same axis, one cool, one warm.
   =========================================================================== */

:root {
  /* ---- blues: the field ---- */
  --abyss: #061626; /* deepest — ground for dark sections */
  --deep: #0b2740; /* panel ground on dark */
  --navy: #14395c; /* raised surface on dark */
  --steel: #2983af; /* the video's single most common colour */
  --cyan: #29a0bb;
  --sky: #77cadb; /* light cyan, from Gustavo's portrait */
  --mist: #cfe6ef;

  /* ---- corals: the accent ---- */
  --coral: #f4614e; /* the truck. Primary actions and accents. */
  --coral-hot: #ff7a5f;
  /* Coral as TEXT on the light band. --coral itself measures 2.92:1 on --paper
     (fails AA); this is the same hue two steps down, at 4.84:1. */
  --coral-ink: #c23e2b;
  --ember: #fe9769; /* warm highlight, from Jaime's portrait */
  --crimson: #d44e65;

  /* ---- light ground ---- */
  --paper: #f2f7fa;
  --paper-2: #e7eff5;

  /* ---- text ---- */
  --on-dark: #eef6fa;
  --on-dark-2: #a8c4d6; /* secondary on --abyss / --deep */
  --on-light: #0b2740;
  --on-light-2: #4a6b83; /* secondary on --paper */

  /* ---- lines ---- */
  --line-dark: rgba(207, 230, 239, 0.16);
  --line-dark-2: rgba(207, 230, 239, 0.08);
  --line-light: rgba(11, 39, 64, 0.14);
  --line-light-2: rgba(11, 39, 64, 0.07);

  /* ---- status ---- */
  --live: #4fd1a5;
  --live-soft: rgba(79, 209, 165, 0.15);

  /* ---- type ---- */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-hero: clamp(38px, 7vw, 104px);
  --text-statement: clamp(24px, 3.3vw, 48px);
  --text-h2: clamp(29px, 3.9vw, 56px);
  --text-h3: clamp(19px, 1.5vw, 23px);
  --text-lede: clamp(16px, 1.35vw, 20px);
  --text-body: 15px;
  --text-label: 11px;

  /* ---- shape & motion ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.16s;
  --dur-mid: 0.42s;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
}