/* ============================================================================
   TOKENS — design constants
   ----------------------------------------------------------------------------
   Loaded by : every page (must be the FIRST stylesheet linked)
   Depends on: nothing

   This is the single source of truth for colour, shadow and elevation.
   No other file may declare a raw hex colour — add a token here instead so a
   rebrand is a one-file change.
   ============================================================================ */

:root{
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --white:#ffffff;
  --light:#f5f7fa;        /* alternating section background */
  --light2:#eef2ff;       /* tinted chips, icon tiles */
  --border:#dde3ed;

  /* ── Brand ────────────────────────────────────────────────────────────── */
  --navy:#1e3a7a;         /* primary; matches the Elyco logo */
  --blue:#2b4da8;         /* hover / accent */
  --blue-mid:#3a5fc5;     /* scrollbar thumb */
  --blue-light:#eef2ff;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text-dark:#1a202c;    /* headings */
  --text-mid:#4a5568;     /* body copy */
  --text-light:#718096;   /* labels, captions */

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --shadow:0 2px 12px rgba(30,58,122,0.08);
  --shadow-md:0 6px 24px rgba(30,58,122,0.12);
  --shadow-lg:0 12px 40px rgba(30,58,122,0.15);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --content-max:1260px;   /* shared max width for centred containers */
  --gutter:6%;            /* horizontal page padding */
  --navbar-h:80px;        /* fixed navbar height; offsets sticky elements */
}