/* ==========================================================================
   Zynthari design tokens — v2.0 (7 Oct 2026)
   A lab notebook: light paper, dark ink, one accent colour.
   The accent (violet, from the wordmark) is for buttons and links only.
   Plan: "Zynthari Website Plan", 7 Oct 2026, Look and feel.
   ========================================================================== */

:root {
  /* ---- Colour: surfaces ---- */
  --paper:          #F7F6F2;  /* page background */
  --surface:        #EFEEE8;  /* alternate bands, panels */
  --raised:         #FFFFFF;  /* inputs, data sheets */

  /* ---- Colour: ink & text ---- */
  --ink:            #14142B;  /* text, dark overlay                  16.7:1 on paper */
  --ink-2:          #2A2A48;
  --muted:          #5C5F72;  /* secondary text                       5.8:1 on paper */

  /* ---- Colour: lines (decorative only, never text) ---- */
  --line:           #DAD8D0;
  --line-strong:    #B9B7AE;

  /* ---- Colour: the one accent ---- */
  --accent:         #5007FA;  /* buttons and links                    7.1:1 on paper */
  --accent-deep:    #3F05C4;  /* hover */

  /* ---- Colour: data flags (illustrations and form errors only) ---- */
  --flag:           #B42318;
  --flag-tint:      #FBE9E7;

  /* ---- Typography ---- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(40px, 6vw, 84px);
  --fs-h1:      clamp(36px, 4.6vw, 60px);
  --fs-h2:      clamp(28px, 3.3vw, 44px);
  --fs-h3:      clamp(20px, 1.8vw, 24px);
  --fs-big:     clamp(26px, 3.2vw, 44px);
  --fs-lede:    clamp(18px, 1.5vw, 21px);
  --fs-body:    17px;
  --fs-small:   14px;

  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-body:    1.6;

  --measure: 64ch;

  /* ---- Space ---- */
  --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;

  /* ---- Layout ---- */
  --shell: 1200px;
  --gutter: 24px;
  --mast-h: 68px;

  /* ---- Shape ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --border: 1px solid var(--line);

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 200ms;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
}

@media (max-width: 599px) {
  :root { --fs-body: 16px; --gutter: 16px; --mast-h: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}