/* GENERATED by tools/build-tokens.mjs. Do not edit by hand. */

:root {
  /* Primitive scales (Olive moss + status hues). Components never use these directly. */
  --text-50: #f5f5ef;
  --text-100: #ebebe0;
  --text-150: #e1e1d0;
  --text-200: #d7d7c1;
  --text-300: #c3c3a2;
  --text-400: #afaf83;
  --text-500: #9c9b63;
  --text-600: #7c7c50;
  --text-700: #5d5d3c;
  --text-800: #3e3e28;
  --text-850: #2f2e1e;
  --text-900: #1f1f14;
  --text-950: #100f0a;
  --background-50: #f2f3f2;
  --background-100: #e5e6e5;
  --background-150: #d8dad8;
  --background-200: #cbcdcb;
  --background-300: #b1b4b1;
  --background-400: #979c96;
  --background-500: #7d837c;
  --background-600: #646963;
  --background-700: #4b4e4b;
  --background-800: #323432;
  --background-850: #252725;
  --background-900: #191a19;
  --background-950: #0c0d0c;
  --primary-50: #f5f5ef;
  --primary-100: #ebebe0;
  --primary-150: #e2e1d0;
  --primary-200: #d8d7c0;
  --primary-300: #c4c4a1;
  --primary-400: #b0b082;
  --primary-500: #9d9c62;
  --primary-600: #7d7d4f;
  --primary-700: #5e5e3b;
  --primary-800: #3f3e27;
  --primary-850: #2f2f1d;
  --primary-900: #1f1f14;
  --primary-950: #10100a;
  --secondary-50: #f0f5ef;
  --secondary-100: #e0ecdf;
  --secondary-150: #d1e2d0;
  --secondary-200: #c1d8c0;
  --secondary-300: #a2c5a0;
  --secondary-400: #83b181;
  --secondary-500: #649e61;
  --secondary-600: #507e4e;
  --secondary-700: #3c5f3a;
  --secondary-800: #283f27;
  --secondary-850: #1e2f1d;
  --secondary-900: #142013;
  --secondary-950: #0a100a;
  --accent-50: #eff5f1;
  --accent-100: #dfece3;
  --accent-150: #d0e2d5;
  --accent-200: #c0d8c8;
  --accent-300: #a0c5ac;
  --accent-400: #81b190;
  --accent-500: #619e74;
  --accent-600: #4e7e5d;
  --accent-700: #3a5f46;
  --accent-800: #273f2f;
  --accent-850: #1d2f23;
  --accent-900: #132017;
  --accent-950: #0a100c;
  --danger-50: #faebea;
  --danger-100: #f5d8d6;
  --danger-150: #f0c4c1;
  --danger-200: #ecb1ac;
  --danger-300: #e28983;
  --danger-400: #d8625a;
  --danger-500: #cf3b30;
  --danger-600: #a52f27;
  --danger-700: #7c231d;
  --danger-800: #531813;
  --danger-850: #3e120f;
  --danger-900: #290c0a;
  --danger-950: #150605;
  --warning-50: #faf4eb;
  --warning-100: #f5ead6;
  --warning-150: #f0dfc2;
  --warning-200: #ebd4ad;
  --warning-300: #e0bf85;
  --warning-400: #d6a95c;
  --warning-500: #cc9433;
  --warning-600: #a37629;
  --warning-700: #7a591f;
  --warning-800: #523b14;
  --warning-850: #3d2c0f;
  --warning-900: #291e0a;
  --warning-950: #140f05;
  --info-50: #eef4f6;
  --info-100: #dde8ee;
  --info-150: #cddde5;
  --info-200: #bcd1dc;
  --info-300: #9abbcb;
  --info-400: #78a4ba;
  --info-500: #578da8;
  --info-600: #457187;
  --info-700: #345565;
  --info-800: #233843;
  --info-850: #1a2a32;
  --info-900: #111c22;
  --info-950: #090e11;

  /* Typography */
  --font-key: "Rubik Dirt", "Ubuntu Sans Mono", ui-monospace, monospace;
  --font-mono: "Ubuntu Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* 1.125 scale. The key word stays about 1.3x the h1 at every width. */
  --fs-key: clamp(2rem, 1.8rem + 0.8vw, 2.369rem);
  --fs-h1: clamp(1.602rem, 1.45rem + 0.6vw, 1.802rem);
  --fs-h2: 1.424rem;
  --fs-h3: 1.266rem;
  --fs-prose: 1.125rem; /* long-form body; .prose drops to --fs-body on phones */
  --fs-body: 1rem;
  --fs-ui: 1rem;
  --fs-sm: 0.889rem;
  --fs-label: 0.889rem;

  --lh-key: 1;
  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.25;
  --lh-body: 1.6;
  --lh-sm: 1.45;
  --lh-ui: 1.25;
  --lh-label: 1.3;
  --tracking-h1: -0.02em;
  --tracking-label: 0.08em;

  /* Spacing: px-named so the value is never in doubt */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;
  --space-section: clamp(56px, 8vw, 96px);
  --space-block: 40px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Sizing */
  --container: 1120px;
  --measure-headline: 720px;
  --measure-text: 560px;
  --measure-prose: 37rem; /* ~72 characters of body text; rem, not ch, so it survives font swaps */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --target-min: 24px;
  --target-touch: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --ratio-card: 16 / 10;
  --ratio-feature: 3 / 2;

  /* Borders and corners. Flat: no shadows. */
  --border-width: 1px;
  --border-width-thick: 2px;
  --radius: 10px;      /* controls: buttons, inputs, chips, swatches, alerts */
  --radius-sm: 6px;    /* inline code, checkboxes, segments inside a track */
  --radius-lg: 14px;   /* frames: cards, panels, media, stages, code blocks, tables, TOC */
  --radius-full: 999px; /* tags, swatch dots */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layers */
  --z-header: 10;
  --z-menu: 20;
  --z-toast: 30;

  /* Breakpoints (reference only; CSS vars cannot be used in media queries):
     mobile < 640px, tablet 640-1023px, desktop >= 1024px */

  color-scheme: light;
  --color-bg: var(--background-100); /* #e5e6e5 */
  --color-surface: var(--background-50); /* #f2f3f2 */
  --color-bg-subtle: var(--background-100); /* #e5e6e5 */
  --color-bg-sunken: var(--background-200); /* #cbcdcb */
  --color-bg-hover: var(--background-150); /* #d8dad8 */
  --color-text: var(--text-900); /* #1f1f14 */
  --color-text-muted: var(--text-700); /* #5d5d3c */
  --color-label: var(--accent-700); /* #3a5f46 */
  --color-meta: var(--primary-700); /* #5e5e3b */
  --color-brand: var(--secondary-600); /* #507e4e */
  --color-link: var(--secondary-700); /* #3c5f3a */
  --color-border: var(--background-200); /* #cbcdcb */
  --color-border-strong: var(--background-600); /* #646963 */
  --color-focus: var(--secondary-700); /* #3c5f3a */
  --color-brand-fill: var(--secondary-700); /* #3c5f3a */
  --color-brand-fill-hover: var(--secondary-800); /* #283f27 */
  --color-brand-fill-edge: var(--secondary-700); /* #3c5f3a */
  --color-brand-fill-edge-hover: var(--secondary-800); /* #283f27 */
  --color-on-brand: var(--background-50); /* #f2f3f2 */
  --color-selected-bg: var(--text-900); /* #1f1f14 */
  --color-selected-fg: var(--background-50); /* #f2f3f2 */
  --color-disabled-bg: var(--background-150); /* #d8dad8 */
  --color-disabled-fg: var(--background-500); /* #7d837c */
  --color-danger: var(--danger-600); /* #a52f27 */
  --color-danger-bg: var(--danger-50); /* #faebea */
  --color-warning: var(--warning-700); /* #7a591f */
  --color-warning-bg: var(--warning-50); /* #faf4eb */
  --color-success: var(--secondary-700); /* #3c5f3a */
  --color-success-bg: var(--secondary-50); /* #f0f5ef */
  --color-info: var(--info-700); /* #345565 */
  --color-info-bg: var(--info-50); /* #eef4f6 */
}

/* Touch screens: every control and standalone action reaches 44px. Visual style is unchanged. */
@media (pointer: coarse) {
  :root {
    --control-sm: 44px;
    --control-md: 44px;
    --target-min: 44px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--background-900); /* #191a19 */
    --color-surface: var(--background-950); /* #0c0d0c */
    --color-bg-subtle: var(--background-900); /* #191a19 */
    --color-bg-sunken: var(--background-800); /* #323432 */
    --color-bg-hover: var(--background-850); /* #252725 */
    --color-text: var(--text-100); /* #ebebe0 */
    --color-text-muted: var(--text-300); /* #c3c3a2 */
    --color-label: var(--accent-400); /* #81b190 */
    --color-meta: var(--primary-400); /* #b0b082 */
    --color-brand: var(--secondary-400); /* #83b181 */
    --color-link: var(--secondary-400); /* #83b181 */
    --color-border: var(--background-800); /* #323432 */
    --color-border-strong: var(--background-400); /* #979c96 */
    --color-focus: var(--secondary-400); /* #83b181 */
    --color-brand-fill: var(--secondary-700); /* #3c5f3a */
    --color-brand-fill-hover: var(--secondary-800); /* #283f27 */
    --color-brand-fill-edge: var(--secondary-600); /* #507e4e */
    --color-brand-fill-edge-hover: var(--secondary-500); /* #649e61 */
    --color-on-brand: var(--text-100); /* #ebebe0 */
    --color-selected-bg: var(--text-100); /* #ebebe0 */
    --color-selected-fg: var(--background-950); /* #0c0d0c */
    --color-disabled-bg: var(--background-850); /* #252725 */
    --color-disabled-fg: var(--background-500); /* #7d837c */
    --color-danger: var(--danger-400); /* #d8625a */
    --color-danger-bg: var(--danger-900); /* #290c0a */
    --color-warning: var(--warning-400); /* #d6a95c */
    --color-warning-bg: var(--warning-900); /* #291e0a */
    --color-success: var(--secondary-400); /* #83b181 */
    --color-success-bg: var(--secondary-900); /* #142013 */
    --color-info: var(--info-400); /* #78a4ba */
    --color-info-bg: var(--info-900); /* #111c22 */
  }
}

/* Explicit themes work on :root and on any nested element (e.g. side-by-side specimens). */
[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--background-100); /* #e5e6e5 */
  --color-surface: var(--background-50); /* #f2f3f2 */
  --color-bg-subtle: var(--background-100); /* #e5e6e5 */
  --color-bg-sunken: var(--background-200); /* #cbcdcb */
  --color-bg-hover: var(--background-150); /* #d8dad8 */
  --color-text: var(--text-900); /* #1f1f14 */
  --color-text-muted: var(--text-700); /* #5d5d3c */
  --color-label: var(--accent-700); /* #3a5f46 */
  --color-meta: var(--primary-700); /* #5e5e3b */
  --color-brand: var(--secondary-600); /* #507e4e */
  --color-link: var(--secondary-700); /* #3c5f3a */
  --color-border: var(--background-200); /* #cbcdcb */
  --color-border-strong: var(--background-600); /* #646963 */
  --color-focus: var(--secondary-700); /* #3c5f3a */
  --color-brand-fill: var(--secondary-700); /* #3c5f3a */
  --color-brand-fill-hover: var(--secondary-800); /* #283f27 */
  --color-brand-fill-edge: var(--secondary-700); /* #3c5f3a */
  --color-brand-fill-edge-hover: var(--secondary-800); /* #283f27 */
  --color-on-brand: var(--background-50); /* #f2f3f2 */
  --color-selected-bg: var(--text-900); /* #1f1f14 */
  --color-selected-fg: var(--background-50); /* #f2f3f2 */
  --color-disabled-bg: var(--background-150); /* #d8dad8 */
  --color-disabled-fg: var(--background-500); /* #7d837c */
  --color-danger: var(--danger-600); /* #a52f27 */
  --color-danger-bg: var(--danger-50); /* #faebea */
  --color-warning: var(--warning-700); /* #7a591f */
  --color-warning-bg: var(--warning-50); /* #faf4eb */
  --color-success: var(--secondary-700); /* #3c5f3a */
  --color-success-bg: var(--secondary-50); /* #f0f5ef */
  --color-info: var(--info-700); /* #345565 */
  --color-info-bg: var(--info-50); /* #eef4f6 */
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--background-900); /* #191a19 */
  --color-surface: var(--background-950); /* #0c0d0c */
  --color-bg-subtle: var(--background-900); /* #191a19 */
  --color-bg-sunken: var(--background-800); /* #323432 */
  --color-bg-hover: var(--background-850); /* #252725 */
  --color-text: var(--text-100); /* #ebebe0 */
  --color-text-muted: var(--text-300); /* #c3c3a2 */
  --color-label: var(--accent-400); /* #81b190 */
  --color-meta: var(--primary-400); /* #b0b082 */
  --color-brand: var(--secondary-400); /* #83b181 */
  --color-link: var(--secondary-400); /* #83b181 */
  --color-border: var(--background-800); /* #323432 */
  --color-border-strong: var(--background-400); /* #979c96 */
  --color-focus: var(--secondary-400); /* #83b181 */
  --color-brand-fill: var(--secondary-700); /* #3c5f3a */
  --color-brand-fill-hover: var(--secondary-800); /* #283f27 */
  --color-brand-fill-edge: var(--secondary-600); /* #507e4e */
  --color-brand-fill-edge-hover: var(--secondary-500); /* #649e61 */
  --color-on-brand: var(--text-100); /* #ebebe0 */
  --color-selected-bg: var(--text-100); /* #ebebe0 */
  --color-selected-fg: var(--background-950); /* #0c0d0c */
  --color-disabled-bg: var(--background-850); /* #252725 */
  --color-disabled-fg: var(--background-500); /* #7d837c */
  --color-danger: var(--danger-400); /* #d8625a */
  --color-danger-bg: var(--danger-900); /* #290c0a */
  --color-warning: var(--warning-400); /* #d6a95c */
  --color-warning-bg: var(--warning-900); /* #291e0a */
  --color-success: var(--secondary-400); /* #83b181 */
  --color-success-bg: var(--secondary-900); /* #142013 */
  --color-info: var(--info-400); /* #78a4ba */
  --color-info-bg: var(--info-900); /* #111c22 */
}