/* Forest Bloom / VeinMate Assist — design tokens
   Import once at the root. Fonts: load Fraunces, Inter, IBM Plex Mono from Google Fonts. */
:root {
  /* Colour */
  --color-teal:      #0B3D4A;
  --color-ink:       #0E1B1E;
  --color-bloom:     #1FA97A;
  --color-cyan:      #4BB8D8;
  --color-panel:     #07303B;
  --color-mist:      #E4EEEC;
  --color-offwhite:  #F6FAF9;
  --color-grey:      #59696B;
  --color-white:     #FFFFFF;
  --color-alert-warn:#D9834F;  /* problem-stats only */
  --color-alert-crit:#C25A5A;  /* problem-stats only */

  /* Semantic */
  --bg:              var(--color-offwhite);
  --bg-dark:         var(--color-panel);
  --text:            var(--color-ink);
  --text-muted:      var(--color-grey);
  --brand:           var(--color-teal);
  --accent:          var(--color-bloom);
  --accent-2:        var(--color-cyan);
  --border:          var(--color-mist);

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-hero:  3.5rem;
  --fs-h1:    2.5rem;
  --fs-h2:    1.75rem;
  --fs-h3:    1.25rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.15;
  --lh-body:  1.6;
  --tracking-eyebrow: 0.12em;

  /* Space scale (8pt) */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-6: 3rem;   --space-8: 4rem;  --space-12: 6rem;

  /* Radius & elevation */
  --radius-sm: 8px;  --radius-md: 14px;  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(11,61,74,.06), 0 8px 24px rgba(11,61,74,.08);
  --shadow-lift: 0 4px 8px rgba(11,61,74,.08), 0 16px 40px rgba(11,61,74,.12);

  --maxw: 1200px;
  --transition: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}