/* Design tokens: semantic colors (light and dark), spacing, radius and layout. Text colors are tuned to WCAG AAA (7:1 or more on every background they sit on). Components use only the semantic --color-* tokens. Dark mode is :root[data-theme="dark"]. */

:root {
  /* primitives */
  --neutral-50:#f4f4f2; --neutral-100:#f1eeeb; --neutral-150:#eaeae7; --neutral-200:#d9d9d6;
  --neutral-250:#c7c5c0; --neutral-300:#a7a5a1; --neutral-400:#8e8b88; --neutral-450:#8d8b87; --neutral-500:#696764;
  --neutral-550:#62605d; --neutral-600:#4e4c49; --neutral-650:#3e3c39; --neutral-700:#2f2e2b; --neutral-800:#1c1a18;
  --neutral-850:#171513; --neutral-900:#110f0d;
  --sage-100:#e2e7e2; --sage-300:#81b291; --sage-500:#255338; --sage-900:#1a1d18;
  --green-50:#e3f0e6; --green-300:#73c48f; --green-700:#1a5934; --green-900:#1b2b21;
  --amber-50:#f6ebd2; --amber-300:#e0b14c; --amber-700:#6c4500; --amber-900:#2e2412;
  --red-50:#f7e1de; --red-300:#f58f84; --red-700:#931612; --red-900:#33191a;
  --tint-parchment-light:#f2ece4; --tint-sage-light:#e4ece5; --tint-lavender-light:#ebe4f0; --tint-sand-light:#f0e8e0;
  --tint-parchment-dark:#1e1b17; --tint-sage-dark:#192019; --tint-lavender-dark:#1d1a22; --tint-sand-dark:#211c17;
  --tan-50:#fdf7ed; --tan-200:#d9b87a; --tan-300:#c4a87a; --tan-600:#6b5a3a; --tan-700:#6e4f1e; --tan-900:#221c12;
  --black-45: rgb(0 0 0 / .45); --black-60: rgb(0 0 0 / .60);

  /* spacing */
  --space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px; --space-12:12px; --space-16:16px;
  --space-20:20px; --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px;
  --space-56:56px; --space-64:64px; --space-80:80px; --space-96:96px; --space-120:120px;
  /* radius */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:9999px;
  /* layout */
  --layout-content-width:1120px; --layout-page-margin:160px; --layout-page-margin-mobile:16px;
  /* shadows (live site values; color is ink #1c1b19) */
  --shadow-sm:0 2px 8px rgb(28 27 25 / .06); --shadow-md:0 4px 16px rgb(28 27 25 / .10); --shadow-lg:0 8px 32px rgb(28 27 25 / .13);
  --layout-gutter:32px; /* stack breakpoint: 860px (media queries can't use vars) */
}

/* semantic, Light (default) */
:root, :root[data-theme="light"] {
  --color-bg-page:var(--neutral-50);          --color-bg-surface:var(--neutral-150);
  --color-text-primary:var(--neutral-850);    --color-text-medium:var(--neutral-650);
  --color-text-muted:var(--neutral-600);      --color-text-on-accent:var(--neutral-50);
  --color-border-hairline:var(--neutral-200); --color-border-control:var(--neutral-400);
  --color-accent:var(--sage-500);             --color-accent-wash:var(--sage-100);
  --color-card-parchment:var(--tint-parchment-light); --color-card-sage:var(--tint-sage-light);
  --color-card-lavender:var(--tint-lavender-light);   --color-card-sand:var(--tint-sand-light);
  --color-status-positive:var(--green-700); --color-status-positive-tint:var(--green-50);
  --color-status-warning:var(--amber-700);  --color-status-warning-tint:var(--amber-50);
  --color-status-critical:var(--red-700);   --color-status-critical-tint:var(--red-50);
  --color-callout-bg:var(--tan-50); --color-callout-border:var(--tan-300); --color-callout-label:var(--tan-700);
  --color-overlay-scrim:var(--black-45);
  --color-focus-ring:var(--color-accent);
  color-scheme: light;
}

/* semantic, Dark */
:root[data-theme="dark"] {
  --color-bg-page:var(--neutral-900);         --color-bg-surface:var(--neutral-800);
  --color-text-primary:var(--neutral-100);    --color-text-medium:var(--neutral-250);
  --color-text-muted:var(--neutral-300);      --color-text-on-accent:var(--neutral-900);
  --color-border-hairline:var(--neutral-700); --color-border-control:var(--neutral-550);
  --color-accent:var(--sage-300);             --color-accent-wash:var(--sage-900);
  --color-card-parchment:var(--tint-parchment-dark); --color-card-sage:var(--tint-sage-dark);
  --color-card-lavender:var(--tint-lavender-dark);   --color-card-sand:var(--tint-sand-dark);
  --color-status-positive:var(--green-300); --color-status-positive-tint:var(--green-900);
  --color-status-warning:var(--amber-300);  --color-status-warning-tint:var(--amber-900);
  --color-status-critical:var(--red-300);   --color-status-critical-tint:var(--red-900);
  --color-callout-bg:var(--tan-900); --color-callout-border:var(--tan-600); --color-callout-label:var(--tan-200);
  --color-overlay-scrim:var(--black-60);
  color-scheme: dark;
}