/* ===========================================================================
   QEG Design System — Tokens
   Single source of truth for colour, type, spacing across web + print.
   =========================================================================== */

:root {
  /* --- Brand colours (sampled directly from QEG logo) -------------------- */
  --qeg-navy:        #183868;   /* primary — atom rings, wordmark fill */
  --qeg-navy-deep:   #0F2549;   /* hover / pressed / strong type */
  --qeg-navy-soft:   #2A4F86;   /* secondary navy, illustrations */
  --qeg-sky:         #88C8E8;   /* accent — atom centre, wordmark highlight */
  --qeg-sky-soft:    #C5E2F2;   /* tinted backgrounds, hover wash */
  --qeg-sky-deep:    #4FA0CC;   /* link, focus ring */

  /* --- Neutrals (cool-leaning, paired with navy) ------------------------- */
  --ink:             #0E1722;   /* body type */
  --ink-soft:        #4A5566;   /* secondary type, captions */
  --ink-mute:        #7A8595;   /* labels, metadata */
  --rule:            #DDE3EB;   /* hairlines, borders */
  --rule-soft:       #ECEFF4;   /* subtle dividers */
  --surface:         #FFFFFF;   /* cards, panels */
  --canvas:          #F6F7F9;   /* page background */
  --canvas-warm:     #FAFAF7;   /* alt page background (print) */

  /* --- Semantic accents (technical, restrained) -------------------------- */
  --signal-ok:       #2F8A5F;
  --signal-warn:     #C77A1B;
  --signal-alert:    #B43A3A;

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — fluid, restrained */
  --t-eyebrow:   11px;  /* mono, uppercase, tracked */
  --t-caption:   12px;
  --t-small:     13px;
  --t-body:      15px;
  --t-body-lg:   17px;
  --t-h6:        18px;
  --t-h5:        22px;
  --t-h4:        28px;
  --t-h3:        36px;
  --t-h2:        48px;
  --t-h1:        64px;
  --t-display:   88px;

  /* --- Spacing scale (4px base) ----------------------------------------- */
  --s-1: 4px;   --s-2: 8px;    --s-3: 12px;   --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;   --s-7: 48px;   --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px; --s-12: 200px;

  /* --- Radii (technical / minimal) -------------------------------------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* --- Elevation (sparingly) -------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 37, 73, 0.04), 0 0 0 1px rgba(15, 37, 73, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 37, 73, 0.06), 0 0 0 1px rgba(15, 37, 73, 0.05);

  /* --- Grid / layout --------------------------------------------------- */
  --container: 1240px;
  --gutter: 24px;
}

/* Print overrides — used by /documents/ pages */
@media print {
  :root {
    --canvas: #FFFFFF;
    --rule: #C8CFD8;
  }
}

/* Reset essentials */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--qeg-navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--qeg-sky-deep); }