/* ==========================================================================
   DESIGN TOKENS — single source of truth for the whole site.
   Change a value here and it updates everywhere. Nothing else should
   hardcode a color, font, or spacing value.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------- */
  --color-bg:             #FAFAF8;  /* page background, warm off-white */
  --color-bg-raised:      #FFFFFF;  /* cards, modal surface */
  --color-text:           #1A1916;  /* primary text, near-black */
  --color-text-secondary: #747269;  /* dates, captions, meta — 4.6:1 on --color-bg (WCAG AA) */
  --color-divider:        #E5E3DD;  /* hairline rules and card borders */
  --color-accent:         #5A6B7A;  /* muted slate — links, active nav, badges */
  --color-accent-soft:    #EDEFF1;  /* accent background wash for badges */
  --color-pass:           #3F6B4E;  /* test result: pass */
  --color-pass-soft:      #E7F0EA;
  --color-fail:           #9A4A3C;  /* test result: fail */
  --color-fail-soft:      #F6E9E6;
  --color-model:          #3B5BAE;  /* 3D CAD viewer part color (matches the blue PLA) */
  --color-model-edge:     #14213F;
  --color-anesto-shell:   #3F6F9F;  /* Anesto 3D assembly part colours (match js/anesto-device.js) */
  --color-anesto-head:    #D9DDE2;
  --color-anesto-bar:     #8A94A0;
  --color-anesto-cush:    #1F9E8F;
  --color-anesto-rest:    #7FB0DC;
  --color-anesto-pin:     #D9702B;

  /* --- Typography --------------------------------------------------- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --size-hero:    clamp(2.75rem, 7vw, 3.9rem);   /* name in hero */
  --size-h2:      clamp(1.75rem, 4vw, 2.25rem);  /* section titles */
  --size-h3:      1.15rem;                       /* entry titles */
  --size-body:    1rem;
  --size-small:   0.875rem;
  --size-xsmall:  0.75rem;                       /* eyebrows, badges */

  --leading-tight: 1.25;
  --leading-body:  1.65;

  /* --- Spacing scale ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;   /* between major sections */

  /* --- Layout ------------------------------------------------------- */
  --max-width:      1140px; /* page container — images and layout span this */
  --max-width-prose: 68ch;  /* cap on running text so lines stay readable */
  --gutter:         var(--space-5);
  --header-height:  64px;
  --radius:         6px;
  --radius-lg:      10px;

  /* --- Motion ------------------------------------------------------- */
  --transition: 150ms ease;
}