/* ==========================================================================
   tokens.css — the only place raw values live.
   See DESIGN.md §2. If a value is not here, it does not go in the CSS.
   ========================================================================== */

:root {
  /* --- Colour: read off the logo file ----------------------------------- */
  --slate:      #5E707C;   /* logo mark, muted text */
  --blue:       #3571B7;   /* logo accent — the one accent colour */
  --blue-dark:  #2A5C97;   /* accent text on light, hover */
  --blue-light: #8FBEEB;   /* accent on navy */
  --blue-reverse: #6BA6E4; /* the logo's own reverse accent, from logo-reverse.svg */
  --ink:        #0F1A23;   /* body text, headings */
  --navy:       #142633;   /* full-bleed bands, footer */
  --paper:      #F7F6F3;   /* page background */
  --tint:       #EAF1F8;   /* diagram and panel fill */
  --white:      #FFFFFF;   /* cards */

  --rule:       #E1DFD9;   /* hairlines on paper */
  --rule-tint:  #CFDDEC;   /* hairlines on tint */
  --rule-dark:  #26414F;   /* hairlines on navy */

  --slate-lt:   #8B979F;   /* labels only — fails 4.5:1 at body size */
  --body:       #364550;   /* long-form paragraph text */
  --body-mute:  #55636C;   /* card and secondary paragraphs */
  --on-navy:    #FFFFFF;
  --on-navy-mute: #A9B7C0;
  --on-navy-lbl:  #7F94A2;
  --on-navy-btn:  #E4EAEE;   /* button label on navy */
  --on-navy-body: #92A3AE;   /* footer paragraph on navy — 5.97:1 */
  --navy-line:    #33505F;   /* hairlines and placeholder bars on navy */
  --paper-line:   #DCE3E8;   /* placeholder bars in drawn diagrams, on white */

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui:      'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Display sizes are fluid: the DESIGN.md value is the desktop maximum. */
  --t-hero:  clamp(38px, 6.4vw, 68px);
  --t-h1:    clamp(34px, 5.8vw, 62px);
  --t-h2:    clamp(30px, 4.2vw, 46px);
  --t-h2s:   clamp(28px, 3.4vw, 38px);
  --t-h3:    clamp(26px, 3.0vw, 34px);
  --t-h4:    clamp(24px, 2.6vw, 30px);
  --t-h5:    clamp(21px, 2.0vw, 24px);
  --t-lead:  clamp(18px, 1.8vw, 21px);
  --t-body:   16px;
  --t-small:  15px;
  --t-meta:   14px;
  --t-cap:    13px;
  --t-label:  11px;

  --lh-display: 1.06;
  --lh-head:    1.15;
  --lh-body:    1.72;
  --lh-tight:   1.55;
  --ls-display: -0.025em;
  --ls-label:    0.16em;

  /* --- Space ------------------------------------------------------------ */
  --s-1:  6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 22px;
  --s-5: 28px;
  --s-6: 44px;
  --s-7: 56px;
  --s-8: 76px;
  --s-9: 84px;
  --gutter: 64px;

  /* --- Structure -------------------------------------------------------- */
  --radius-panel: 14px;
  --radius-btn:    6px;
  --radius-chip:  999px;
  --radius-node:   5px;
  /* A plate sitting inside a hairline border needs the panel radius minus that
     hairline, or a 1px seam shows at the corners. */
  --radius-hair:   calc(var(--radius-panel) - var(--rule-w));
  --rule-w: 1px;
  --measure-body: 34ch;
  --measure-long: 62ch;
  --page-max: 1440px;
  --hero-min: 76vh;       /* the hero band stands taller than a content section */
  --grid: repeat(12, minmax(0, 1fr));

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:  150ms;   /* hover, focus, arrow nudge */
  --dur-enter:  260ms;   /* one element arriving */
  --dur-hero:   520ms;   /* the hero entrance */

  /* Brand gradient — navy to accent, both already tokens. DESIGN.md §3 permits
     this one and still bans purple/pink/teal. */
  /* Light blooms behind the apex motif, top-right; the text column stays navy,
     so hero copy never lands on the bright end. */
  --grad-brand: radial-gradient(90% 120% at 92% 12%,
                var(--blue) 0%, var(--blue-dark) 30%, var(--navy) 62%);

  /* A second, slow-drifting layer for the hero. Uses --blue-dark, which is
     darker than the bright stop, so movement can never lift text contrast. */
  --grad-hero-drift: radial-gradient(60% 80% at 18% 88%, var(--blue-dark) 0%, transparent 62%);
  --sheen: rgba(255, 255, 255, 0.20);

  --focus: 0 0 0 3px rgba(53, 113, 183, 0.35);
  /* Engine-turning, the concentric arc pattern printed on a real certificate.
     Sits at low opacity in the corner of a compliance card: texture with a
     reason, not decoration. */
  --guilloche: repeating-radial-gradient(circle at 100% 0,
               var(--navy) 0 1px, transparent 1px 8px);

  --dots-light: radial-gradient(var(--slate-lt) 1px, transparent 1px);
  --dots-dark:  radial-gradient(#2C4557 1px, transparent 1px);
  --dots-size: 22px 22px;
}

@media (max-width: 900px) {
  :root { --gutter: 28px; }
}

@media (max-width: 520px) {
  :root { --gutter: 20px; }
}