/* tokens.css — shared design tokens for clinbolt.com pages.
   Values follow the clinbolt.com home page (repo TechDlx/clinbolt.com, styles.css):
   teal and amber on a sage page, Segoe UI stack, pill controls, rounded cards.
   Component CSS only references these tokens; change a value here to re-skin. */
:root {
  color-scheme: light;

  /* Typography (the home page's stack) */
  --font-sans: "Segoe UI", ui-rounded, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-display: clamp(1.9rem, 3.6vw, 2.75rem);

  /* Brand (home page names in comments) */
  --brand-teal: #0f766e;        /* --teal */
  --brand-teal-deep: #134e4a;   /* --teal-deep, also the hero and footer panels */
  --brand-teal-text: #115e59;   /* --teal-text */
  --brand-teal-tint: #dff2e9;   /* --teal-tint */
  --brand-mint: #5eead4;        /* --mint */
  --brand-mint-soft: #99f6e4;   /* --mint-soft */
  --brand-amber: #f59e0b;       /* --amber */
  --brand-amber-tint: #fcf1d6;  /* --amber-tint */
  --brand-amber-text: #78350f;  /* --amber-text */
  --brand-amber-icon: #b45309;  /* --amber-icon */
  --hero-text: #d7eee7;

  /* Colour: surfaces and ink (all text/ink pairs >= 4.5:1 on their surface) */
  --color-page: #f5f8f3;        /* page background (--bg) */
  --color-bg: #ffffff;          /* cards, panels, inputs' container */
  --color-surface: #f9fbf8;     /* inputs, inner cards */
  --color-surface-2: #eef4f0;
  --color-border: #d6e3dc;      /* --line */
  --color-border-strong: #b7cbc2;
  --color-text: #0f172a;        /* --ink */
  --color-text-muted: #475569;  /* --muted */
  --color-heading: #134e4a;
  --color-link: #0f766e;

  /* Brand / interactive */
  --color-primary: #0f766e;
  --color-primary-hover: #134e4a;
  --color-primary-ink: #ffffff;
  --color-focus: #0f766e;

  /* Status (background / border / text) — always paired with a text label */
  --color-good-bg: #e6f4ee;
  --color-good-border: #0f766e;
  --color-good-text: #115e59;
  --color-warn-bg: #fcf1d6;
  --color-warn-border: #e8b64c;
  --color-warn-text: #78350f;
  --color-info-bg: #dff2e9;
  --color-info-border: #5fb3a0;
  --color-info-text: #134e4a;
  --color-danger-bg: #fbe8e8;
  --color-danger-border: #d03b3b;
  --color-danger-text: #8a1f1f;

  /* Data-viz: one teal ramp, light -> dark, for magnitude (choropleth, bars); amber
     accent for markers and highlights. Bars (#0d9488) and accent (#d97706) pass the
     dataviz validator on the white panel (contrast >= 3:1, CVD dE 12.5). */
  --viz-seq-100: #ccfbf1;
  --viz-seq-300: #5eead4;
  --viz-seq-450: #0d9488;
  --viz-seq-550: #0f766e;
  --viz-seq-700: #134e4a;
  --viz-accent: #d97706;
  --viz-grid: #e3ebe6;
  --viz-land: #e8ece9;

  /* Spacing and shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(19, 78, 74, 0.06), 0 18px 40px -24px rgba(19, 78, 74, 0.35);
  --shadow-sm: 0 1px 2px rgba(19, 78, 74, 0.06), 0 6px 16px -10px rgba(19, 78, 74, 0.25);
  --content-max: 1280px;
}