/* ========================================
   STEAMCO Admin — Canonical Design Tokens
   Single source of truth for all admin surfaces.

   Extracted from @steamco/design-system guide-tokens.css
   and steamco-studio site.css, flattened for vanilla HTML.
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500;600;700&family=Inconsolata:wght@400;500&display=swap');

/* ===== 1. PALETTES ===== */
:root {
	/* Brand hues — primary drives brandscale, secondary drives the complement scale.
	   White-label: override both hues to shift the entire palette. */
	--brand-hue: 180;
	--brand-hue-secondary: 249;
	--scale-hue: 180;

	/* Cream palette (legacy, for reference) */
	--cream-white: #fefdfd;
	--cream-paper: #fbfbf9;
	--cream-canvas: #f0eee6;
	--cream-linen: #e8e6dc;
	--cream-sand: #e0ddd2;
	--cream-bone: #d2cfc3;

	/* ===== TEALSCALE (Primary UI scale, hue 180) =====
	   Chroma peaks mid-range (0.12) and tapers at extremes, matching
	   the morph sequencer's chromatic scale curve. Replaces the old
	   desaturated greenscale. This is the primary scale for UI chrome. */
	--s-teal-25:  oklch(0.97 0.03  180);
	--s-teal-50:  oklch(0.95 0.04  180);
	--s-teal-75:  oklch(0.93 0.05  180);
	--s-teal-100: oklch(0.91 0.06  180);
	--s-teal-150: oklch(0.88 0.07  180);
	--s-teal-200: oklch(0.84 0.08  180);
	--s-teal-300: oklch(0.76 0.10  180);
	--s-teal-400: oklch(0.68 0.11  180);
	--s-teal-500: oklch(0.60 0.12  180);
	--s-teal-600: oklch(0.52 0.11  180);
	--s-teal-700: oklch(0.44 0.10  180);
	--s-teal-800: oklch(0.36 0.08  180);
	--s-teal-850: oklch(0.30 0.06  180);
	--s-teal-900: oklch(0.24 0.05  180);
	--s-teal-925: oklch(0.19 0.04  180);
	--s-teal-950: oklch(0.14 0.03  180);
	--s-teal-975: oklch(0.10 0.02  180);

	/* Tealscale alpha variants */
	--s-teal-alpha-5:  oklch(0.60 0.12 180 / 0.05);
	--s-teal-alpha-10: oklch(0.60 0.12 180 / 0.10);
	--s-teal-alpha-20: oklch(0.60 0.12 180 / 0.20);
	--s-teal-alpha-30: oklch(0.52 0.11 180 / 0.30);
	--s-teal-alpha-50: oklch(0.44 0.10 180 / 0.50);

	/* ===== GREENSCALE (hue 155, for accents/differentiation) =====
	   A warmer green than tealscale. Same chroma curve. */
	--s-green-25:  oklch(0.97 0.03  155);
	--s-green-50:  oklch(0.95 0.04  155);
	--s-green-75:  oklch(0.93 0.05  155);
	--s-green-100: oklch(0.91 0.06  155);
	--s-green-150: oklch(0.88 0.07  155);
	--s-green-200: oklch(0.84 0.08  155);
	--s-green-300: oklch(0.76 0.10  155);
	--s-green-400: oklch(0.68 0.11  155);
	--s-green-500: oklch(0.60 0.12  155);
	--s-green-600: oklch(0.52 0.11  155);
	--s-green-700: oklch(0.44 0.10  155);
	--s-green-800: oklch(0.36 0.08  155);
	--s-green-850: oklch(0.30 0.06  155);
	--s-green-900: oklch(0.24 0.05  155);
	--s-green-925: oklch(0.19 0.04  155);
	--s-green-950: oklch(0.14 0.03  155);
	--s-green-975: oklch(0.10 0.02  155);

	/* Greenscale alpha variants */
	--s-green-alpha-5:  oklch(0.60 0.12 155 / 0.05);
	--s-green-alpha-10: oklch(0.60 0.12 155 / 0.10);
	--s-green-alpha-20: oklch(0.60 0.12 155 / 0.20);
	--s-green-alpha-30: oklch(0.52 0.11 155 / 0.30);
	--s-green-alpha-50: oklch(0.44 0.10 155 / 0.50);

	/* ===== CREAMSCALE (sRGB hex, warm neutrals) =====
	   Uses hex values to avoid the OKLCH green cast at high lightness.
	   Sourced from the morph sequencer's battle-tested palette. */
	--s-cream-25:  #fefdfd;  /* white */
	--s-cream-50:  #fbfbf9;  /* paper */
	--s-cream-75:  #f6f5f0;  /* pearl */
	--s-cream-100: #f0eee6;  /* cream */
	--s-cream-150: #e8e6dc;  /* linen */
	--s-cream-200: #e0ddd2;  /* sand */
	--s-cream-300: #d2cfc3;  /* bone */
	--s-cream-400: #c4bfb0;  /* stone */
	--s-cream-500: #b8b3a4;  /* clay */
	--s-cream-600: #a09a8a;  /* drift */
	--s-cream-700: #8a8474;  /* walnut */
	--s-cream-800: #736d5e;  /* timber */
	--s-cream-850: #5c5749;  /* bark */
	--s-cream-900: #454136;  /* earth */
	--s-cream-925: #2e2b24;  /* ink */
	--s-cream-950: #1a1815;  /* char */
	--s-cream-975: #000000;  /* black */

	/* Creamscale alpha variants (using oklch for alpha channel) */
	--s-cream-alpha-5:  oklch(0.97 0.01 80 / 0.05);
	--s-cream-alpha-10: oklch(0.97 0.01 80 / 0.10);
	--s-cream-alpha-20: oklch(0.93 0.01 80 / 0.20);
	--s-cream-alpha-40: oklch(0.90 0.01 80 / 0.40);

	/* ===== BRANDSCALE (Dynamic, follows --brand-hue) =====
	   Same chroma curve as tealscale but keyed to --brand-hue. */
	--s-brand-25:  oklch(0.97 0.03  var(--brand-hue));
	--s-brand-50:  oklch(0.95 0.04  var(--brand-hue));
	--s-brand-75:  oklch(0.93 0.05  var(--brand-hue));
	--s-brand-100: oklch(0.91 0.06  var(--brand-hue));
	--s-brand-150: oklch(0.88 0.07  var(--brand-hue));
	--s-brand-200: oklch(0.84 0.08  var(--brand-hue));
	--s-brand-300: oklch(0.76 0.10  var(--brand-hue));
	--s-brand-400: oklch(0.68 0.11  var(--brand-hue));
	--s-brand-500: oklch(0.60 0.12  var(--brand-hue));
	--s-brand-600: oklch(0.52 0.11  var(--brand-hue));
	--s-brand-700: oklch(0.44 0.10  var(--brand-hue));
	--s-brand-800: oklch(0.36 0.08  var(--brand-hue));
	--s-brand-850: oklch(0.30 0.06  var(--brand-hue));
	--s-brand-900: oklch(0.24 0.05  var(--brand-hue));
	--s-brand-925: oklch(0.19 0.04  var(--brand-hue));
	--s-brand-950: oklch(0.14 0.03  var(--brand-hue));
	--s-brand-975: oklch(0.10 0.02  var(--brand-hue));

	/* Brandscale alpha variants */
	--s-brand-alpha-5:  oklch(0.60 0.12 var(--brand-hue) / 0.05);
	--s-brand-alpha-10: oklch(0.60 0.12 var(--brand-hue) / 0.10);
	--s-brand-alpha-20: oklch(0.52 0.11 var(--brand-hue) / 0.20);
	--s-brand-alpha-30: oklch(0.44 0.10 var(--brand-hue) / 0.30);
	--s-brand-alpha-50: oklch(0.36 0.08 var(--brand-hue) / 0.50);

	/* ===== BRANDSCALE SECONDARY (follows --brand-hue-secondary) =====
	   Complement scale for secondary categorization, info states, and
	   visual distinction from the primary accent. Same L/C curve as
	   brandscale, keyed to the secondary hue. White-label: set
	   --brand-hue-secondary to shift the entire complement palette. */
	--s-brand-sec-100: oklch(0.91 0.04  var(--brand-hue-secondary));
	--s-brand-sec-200: oklch(0.84 0.05  var(--brand-hue-secondary));
	--s-brand-sec-300: oklch(0.76 0.06  var(--brand-hue-secondary));
	--s-brand-sec-400: oklch(0.68 0.06  var(--brand-hue-secondary));
	--s-brand-sec-500: oklch(0.62 0.06  var(--brand-hue-secondary));
	--s-brand-sec-600: oklch(0.51 0.06  var(--brand-hue-secondary));
	--s-brand-sec-700: oklch(0.44 0.05  var(--brand-hue-secondary));
	--s-brand-sec-800: oklch(0.36 0.04  var(--brand-hue-secondary));

	/* ===== ACCENT COLORS (Vibrant, for CTAs and highlights) ===== */
	--brand-accent-light: oklch(0.75 0.12 var(--brand-hue));
	--brand-accent: oklch(0.61 0.15 var(--brand-hue));
	--brand-accent-dark: oklch(0.45 0.12 var(--brand-hue));
	--brand-accent-vivid: oklch(0.65 0.2 var(--brand-hue));

	--accent-brand-light: oklch(0.359 0.0477 var(--brand-hue));
	--accent-brand-dark: oklch(0.2859 0.0416 var(--brand-hue));
}

/* ===== 2. SPACING (Fibonacci) ===== */
:root {
	/* Density scale — allows responsive compression */
	--s-space-density: 1;

	/* Base Fibonacci scale — calibrated to 14px font */
	--s-space-0: 0px;
	--s-space-1: calc(var(--s-space-density) * 3px);
	--s-space-2: calc(var(--s-space-density) * 5px);
	--s-space-3: calc(var(--s-space-density) * 8px);
	--s-space-4: calc(var(--s-space-density) * 13px);
	--s-space-5: calc(var(--s-space-density) * 21px);
	--s-space-6: calc(var(--s-space-density) * 34px);
	--s-space-7: calc(var(--s-space-density) * 55px);

	/* Semantic spacing tokens */
	--s-layout-gutter: var(--s-space-6);
	--s-layout-section-gap: var(--s-space-6);
	--s-layout-card-pad: var(--s-space-5);
	--s-layout-card-gap: var(--s-space-4);
	--s-layout-nav-item-gap: var(--s-space-2);
	--s-layout-header-gap: var(--s-space-5);
	--s-layout-cell-pad-x: var(--s-space-3);
	--s-layout-cell-pad-y: var(--s-space-2);
	--s-layout-input-pad-x: var(--s-space-3);
	--s-layout-input-pad-y: var(--s-space-2);
	--s-layout-inset-pad: var(--s-space-4);

	/* Depth padding for nested content */
	--s-layout-depth-pad: var(--s-space-6);
	--s-layout-depth-gap: var(--s-space-5);
	--s-layout-depth-item-gap: var(--s-space-4);
}

/* ===== 3. TYPOGRAPHY ===== */
:root {
	/* Font families — canonical three: Figtree (sans), IBM Plex Serif (serif), Inconsolata (mono) */
	--s-font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--s-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
	--s-font-mono: "Inconsolata", "SF Mono", "Cascadia Code", ui-monospace, monospace;

	/* Base font size — user-tunable */
	--s-font-size-base: 14px;
	--s-font-size-ratio: 1.15;

	/* Density variants */
	--s-font-size-condensed: calc(var(--s-font-size-base) / var(--s-font-size-ratio));
	--s-font-size-standard: var(--s-font-size-base);
	--s-font-size-expanded: calc(var(--s-font-size-base) * var(--s-font-size-ratio));

	/* Modular scale for headings */
	--s-font-size-0: calc(var(--s-font-size-base) / var(--s-font-size-ratio));
	--s-font-size-1: var(--s-font-size-base);
	--s-font-size-2: calc(var(--s-font-size-base) * var(--s-font-size-ratio));
	--s-font-size-3: calc(var(--s-font-size-2) * var(--s-font-size-ratio));
	--s-font-size-4: calc(var(--s-font-size-3) * var(--s-font-size-ratio));

	/* Active font size */
	--s-font-size-active: var(--s-font-size-standard);
	--s-font-size-min: 10px;

	/* Font weights */
	--s-font-weight-regular: 400;
	--s-font-weight-medium: 500;
	--s-font-weight-semibold: 600;
	--s-font-weight-bold: 700;

	/* Line heights */
	--s-font-line-height-tight: 1.25;
	--s-font-line-height-normal: 1.4;
	--s-font-line-height-relaxed: 1.6;
}

/* ===== 3b. DENSITY MODES ===== */
/* Density modes scale spacing and font size proportionally.
   --s-space-density multiplies all Fibonacci spacing tokens.
   --s-font-size-active selects the density-appropriate font size.
   Radius and border tokens derive from --s-font-size-active, so they
   cascade automatically when density changes. */
:root[data-density='condensed'] {
	--s-space-density: calc(1 / var(--s-font-size-ratio));
	--s-font-size-active: var(--s-font-size-condensed);
}
:root[data-density='standard'],
:root:not([data-density]) {
	--s-space-density: 1;
	--s-font-size-active: var(--s-font-size-standard);
}
:root[data-density='expanded'] {
	--s-space-density: var(--s-font-size-ratio);
	--s-font-size-active: var(--s-font-size-expanded);
}

/* ===== 4. RADIUS & BORDERS ===== */
:root {
	/* Proportional radius system */
	--s-radius-base: calc(var(--s-font-size-active) * 0.267);
	--s-radius-0: calc(var(--s-radius-base) * 0.5);
	--s-radius-1: calc(var(--s-radius-base) * 1);
	--s-radius-2: calc(var(--s-radius-base) * 1.5);
	--s-radius-3: calc(var(--s-radius-base) * 2.5);
	--s-radius-4: calc(var(--s-radius-base) * 3.5);
	--s-radius-round: 9999px;
	--s-radius-window: 12px;

	/* Border widths */
	--s-border-thin: calc(var(--s-font-size-active) * 0.071);
	--s-border-base: calc(var(--s-font-size-active) * 0.143);
	--s-border-thick: calc(var(--s-font-size-active) * 0.214);
}

/* ===== 5. Z-INDEX ===== */
:root {
	--s-z-base: 0;
	--s-z-raised: 1;
	--s-z-dropdown: 100;
	--s-z-sticky: 200;
	--s-z-fixed: 300;
	--s-z-drawer: 400;
	--s-z-modal-backdrop: 500;
	--s-z-modal: 510;
	--s-z-popover: 600;
	--s-z-tooltip: 700;
	--s-z-notification: 800;
	--s-z-dev-tools: 900;
	--s-z-max: 9999;
}

/* ===== 6. SHADOWS ===== */
:root {
	/* Light theme shadows (default) */
	--s-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.08), 0 1px 3px oklch(0 0 0 / 0.04);
	--s-shadow-md: 0 2px 4px oklch(0 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.06);
	--s-shadow-lg: 0 8px 16px oklch(0 0 0 / 0.12), 0 4px 8px oklch(0 0 0 / 0.08);
	--s-shadow-xl: 0 12px 24px oklch(0 0 0 / 0.16), 0 6px 12px oklch(0 0 0 / 0.1);

	/* Legacy aliases */
	--s-shadow-subtle: var(--s-shadow-sm);
	--s-shadow-float: var(--s-shadow-lg);

	/* Icon sizes */
	--s-icon-xs: calc(var(--s-font-size-active) * 0.75);
	--s-icon-sm: calc(var(--s-font-size-active) * 1);
	--s-icon-md: calc(var(--s-font-size-active) * 1.25);
	--s-icon-lg: calc(var(--s-font-size-active) * 1.5);
	--s-icon-xl: calc(var(--s-font-size-active) * 2);
}

/* ===== 7. TRANSITIONS ===== */
:root {
	/* Duration tokens */
	--s-duration-instant: 0ms;
	--s-duration-fast: 100ms;
	--s-duration-normal: 200ms;
	--s-duration-slow: 300ms;
	--s-duration-slower: 500ms;
	--s-duration-slowest: 800ms;

	/* Easing functions */
	--s-ease-linear: linear;
	--s-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--s-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--s-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--s-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

	/* Transition shorthand combinations */
	--s-transition-colors: color var(--s-duration-fast) var(--s-ease-out), background-color var(--s-duration-fast) var(--s-ease-out), border-color var(--s-duration-fast) var(--s-ease-out);
	--s-transition-opacity: opacity var(--s-duration-normal) var(--s-ease-out);
	--s-transition-transform: transform var(--s-duration-normal) var(--s-ease-out);
	--s-transition-shadow: box-shadow var(--s-duration-fast) var(--s-ease-out);
	--s-transition-all: all var(--s-duration-normal) var(--s-ease-out);

	/* Component-specific transitions */
	--s-transition-modal-enter: var(--s-duration-normal) var(--s-ease-out);
	--s-transition-modal-exit: var(--s-duration-fast) var(--s-ease-in);
	--s-transition-dropdown: var(--s-duration-fast) var(--s-ease-out);
	--s-transition-tooltip: var(--s-duration-fast) var(--s-ease-out);
}

/* ===== 8. STATUS COLORS ===== */
:root {
	/* Status color components (for manipulation) */
	--s-status-success-O: 0.58;
	--s-status-success-C: 0.12;
	--s-status-success-H: 156;
	--s-status-warning-O: 0.73;
	--s-status-warning-C: 0.17;
	--s-status-warning-H: 74;
	--s-status-danger-O: 0.56;
	--s-status-danger-C: 0.23;
	--s-status-danger-H: 19;
	--s-status-info-O: 0.44;
	--s-status-info-C: 0.32;
	--s-status-info-H: 289;

	/* Primary status colors */
	--s-color-status-success: oklch(var(--s-status-success-O) var(--s-status-success-C) var(--s-status-success-H));
	--s-color-status-warning: oklch(var(--s-status-warning-O) var(--s-status-warning-C) var(--s-status-warning-H));
	--s-color-status-danger: oklch(var(--s-status-danger-O) var(--s-status-danger-C) var(--s-status-danger-H));
	--s-color-status-info: oklch(var(--s-status-info-O) var(--s-status-info-C) var(--s-status-info-H));

	/* Semantic aliases */
	--s-color-success: var(--s-color-status-success);
	--s-color-warning: var(--s-color-status-warning);
	--s-color-error: var(--s-color-status-danger);
	--s-color-info: var(--s-color-status-info);

	/* Success variations */
	--s-color-success-bg: oklch(0.95 0.02 156);
	--s-color-success-border: oklch(0.7 0.1 156);
	--s-color-success-fg: oklch(0.35 0.12 156);

	/* Warning variations */
	--s-color-warning-bg: oklch(0.97 0.03 74);
	--s-color-warning-border: oklch(0.85 0.14 74);
	--s-color-warning-fg: oklch(0.45 0.17 74);

	/* Error variations */
	--s-color-error-bg: oklch(0.96 0.04 19);
	--s-color-error-border: oklch(0.72 0.2 19);
	--s-color-error-fg: oklch(0.4 0.23 19);

	/* Info variations */
	--s-color-info-bg: oklch(0.94 0.05 289);
	--s-color-info-border: oklch(0.62 0.28 289);
	--s-color-info-fg: oklch(0.32 0.32 289);
}

/* ===== 9. PROMINENT & ON-COLOR TOKENS ===== */
:root {
	/* Prominent action color — vibrant brand for hero CTA buttons */
	--s-color-prominent-bg: oklch(0.42 0.12 var(--brand-hue));
	--s-color-prominent-bg-hover: oklch(0.48 0.13 var(--brand-hue));
	--s-color-prominent-fg: #fff;

	/* On-accent foreground colors */
	--s-color-on-accent: oklch(from var(--s-color-prominent-bg) clamp(0.15, calc(2.9 - 5 * l), 0.97) 0.01 h);
	--s-color-on-success: oklch(from var(--s-color-status-success) clamp(0.15, calc(2.9 - 5 * l), 0.97) 0.01 h);
	--s-color-on-warning: oklch(from var(--s-color-status-warning) clamp(0.15, calc(2.9 - 5 * l), 0.97) 0.01 h);
	--s-color-on-error: oklch(from var(--s-color-status-danger) clamp(0.15, calc(2.9 - 5 * l), 0.97) 0.01 h);
	--s-color-on-info: oklch(from var(--s-color-status-info) clamp(0.15, calc(2.9 - 5 * l), 0.97) 0.01 h);
}

/* ===== 10. ALPHA OVERLAYS ===== */
:root {
	/* Lift (white at alpha) — always lighter than parent */
	--s-alpha-lift-lighter: oklch(1 0 0 / 0.08);
	--s-alpha-lift-light: oklch(1 0 0 / 0.16);
	--s-alpha-lift-bright: oklch(1 0 0 / 0.28);

	/* Dark (black at alpha) — always darker than parent */
	--s-alpha-dark: oklch(0 0 0 / 0.06);
	--s-alpha-darker: oklch(0 0 0 / 0.12);
	--s-alpha-midnight: oklch(0 0 0 / 0.2);
}

/* ===== 11. NESTING DEPTH SYSTEM ===== */
:root {
	--s-layout-depth-surface: var(--s-surface-elevation-0-bg);
}

.depth-0 {
	--s-layout-depth-pad: var(--s-space-6);
	--s-layout-depth-gap: var(--s-space-5);
	--s-layout-depth-item-gap: var(--s-space-4);
}

.depth-1 {
	--s-layout-depth-pad: var(--s-space-5);
	--s-layout-depth-gap: var(--s-space-4);
	--s-layout-depth-item-gap: var(--s-space-3);
}

.depth-2 {
	--s-layout-depth-pad: var(--s-space-4);
	--s-layout-depth-gap: var(--s-space-3);
	--s-layout-depth-item-gap: var(--s-space-2);
}

/* ===== 12. LIGHT THEME (default) ===== */
:root,
:root[data-theme='light'] {
	/* App background — warm cream ground across entire shell.
	   Creamscale is now hex (sRGB) to avoid oklch green cast. */
	--s-color-bg-app: var(--s-cream-100);
	--s-color-bg-panel: var(--s-cream-50);
	--s-color-bg-subtle: var(--s-cream-75);
	--s-color-bg-surface: var(--s-cream-25);
	--s-color-bg-titlebar: var(--s-cream-alpha-10);

	/* Borders */
	--s-color-border-subtle: var(--s-cream-150);
	--s-color-border-strong: var(--s-cream-200);

	/* Text colors */
	--s-color-fg-primary: var(--s-brand-950);
	--s-color-fg-muted: var(--s-brand-700);
	--s-color-fg-soft: var(--s-brand-600);

	/* Surface elevation — cream ground vs cream-tinted raised surfaces.
	   Elevation-1 uses creamscale-25 (nearly white with hint of warmth). */
	--s-surface-elevation-0-bg: var(--s-color-bg-app);
	--s-surface-elevation-1-bg: var(--s-cream-25);
	--s-surface-elevation-2-bg: var(--s-cream-75);
	--s-color-backdrop-scrim: var(--s-brand-alpha-20);

	/* Material overrides for light theme */
	--mat-solid-bg: oklch(from var(--s-brand-50) l c h / 0.1);

	/* Accent colors for light theme */
	--s-color-accent-quiet: var(--accent-brand-light);
	--s-color-accent-active: var(--accent-brand-dark);
	--s-color-accent-foreground: var(--s-brand-25);

	/* Secondary accent — complement hue for categorization and info states */
	--s-color-accent-secondary: var(--s-brand-sec-600);
	--s-color-accent-secondary-soft: var(--s-brand-sec-500);

	/* Strong/filled surfaces */
	--s-color-bg-strong: var(--s-color-accent-active);
	--s-color-fg-on-strong: var(--s-brand-25);

	/* Hover states */
	--s-color-hover-bg: var(--s-cream-75);
	--s-color-hover-bg-strong: var(--s-cream-100);
	--s-color-hover-fg: var(--s-brand-900);
	--s-color-hover-border: var(--s-cream-200);
	--s-color-hover-accent: oklch(0.32 0.045 var(--brand-hue));

	/* Focus states */
	--s-color-focus-ring: transparent;
	--s-color-focus-bg: oklch(0.95 0.02 var(--brand-hue));
	--s-color-focus-border: oklch(0.45 0.12 var(--brand-hue));
	--s-color-focus-glow: transparent;

	/* Active/Pressed states */
	--s-color-active-bg: var(--s-cream-100);
	--s-color-active-fg: var(--s-brand-950);
	--s-color-active-border: var(--s-cream-200);

	/* Selected states */
	--s-color-selected-bg: oklch(0.92 0.03 var(--brand-hue));
	--s-color-selected-fg: oklch(0.25 0.04 var(--brand-hue));
	--s-color-selected-border: oklch(0.45 0.1 var(--brand-hue));

	/* Disabled states */
	--s-color-disabled-bg: var(--s-cream-75);
	--s-color-disabled-fg: var(--s-brand-400);
	--s-color-disabled-border: var(--s-cream-100);

	/* Icon colors */
	--s-color-fg-icon: var(--s-brand-700);
	--s-color-fg-icon-muted: var(--s-brand-500);
	--s-color-fg-icon-hover: var(--s-brand-900);

	/* Additional semantic tokens */
	--s-color-fg-heading: var(--s-brand-900);
	--s-color-fg-code: var(--accent-brand-dark);
	--s-color-fg-label: var(--s-brand-600);
	--s-color-bg-card: var(--s-cream-50);
	--s-color-bg-card-hover: var(--s-cream-75);
	--s-color-bg-table-header: var(--s-cream-100);
	--s-color-bg-table-row-hover: var(--s-cream-50);

	/* Navigation colors */
	--s-color-nav-hover-bg: var(--s-cream-100);
	--s-color-nav-active-bg: var(--s-color-bg-strong);
	--s-color-nav-active-fg: var(--s-color-fg-on-strong);
}

/* ===== 13. DARK THEME ===== */
:root[data-theme='dark'] {
	/* App background — flat brandscale, opaque */
	--s-color-bg-app: var(--s-brand-975);
	--s-color-bg-panel: var(--s-brand-950);
	--s-color-bg-subtle: var(--s-brand-925);
	--s-color-bg-surface: var(--s-brand-950);
	--s-color-bg-titlebar: var(--s-brand-alpha-30);

	/* Borders */
	--s-color-border-subtle: var(--s-brand-850);
	--s-color-border-strong: var(--s-brand-700);

	/* Text colors */
	--s-color-fg-primary: var(--s-brand-50);
	--s-color-fg-muted: var(--s-brand-100);
	--s-color-fg-soft: var(--s-brand-150);

	/* Surface elevation — gradient renders ~0.06–0.11, so e1 must clear 0.16+
	   e0 (gradient avg ~0.09) → e1 0.16 (Δ0.07) → e2 0.21 (Δ0.05) */
	--s-surface-elevation-0-bg: var(--s-color-bg-app);
	--s-surface-elevation-1-bg: var(--s-brand-925);
	--s-surface-elevation-2-bg: var(--s-brand-900);
	--s-color-backdrop-scrim: var(--s-brand-alpha-50);

	/* Material overrides for dark theme */
	--mat-solid-bg: oklch(0.12 0.018 var(--brand-hue) / 0.3);

	/* Prominent button — slightly brighter in dark mode */
	--s-color-prominent-bg: oklch(0.5 0.13 var(--brand-hue));
	--s-color-prominent-bg-hover: oklch(0.55 0.14 var(--brand-hue));

	/* Accent colors for dark theme (inverted) */
	--s-color-accent-quiet: var(--accent-brand-dark);
	--s-color-accent-active: var(--accent-brand-light);
	--s-color-accent-foreground: var(--s-brand-950);

	/* Secondary accent — lighter in dark mode for legibility */
	--s-color-accent-secondary: var(--s-brand-sec-500);
	--s-color-accent-secondary-soft: var(--s-brand-sec-400);

	/* Strong/filled surfaces */
	--s-color-bg-strong: var(--s-brand-850);
	--s-color-fg-on-strong: var(--s-brand-50);

	/* Hover states — one step above elevation-1 (brandscale-925) */
	--s-color-hover-bg: var(--s-brand-850);
	--s-color-hover-bg-strong: var(--s-brand-800);
	--s-color-hover-fg: var(--s-brand-50);
	--s-color-hover-border: var(--s-brand-700);
	--s-color-hover-accent: oklch(0.42 0.05 var(--brand-hue));

	/* Focus states */
	--s-color-focus-ring: transparent;
	--s-color-focus-bg: oklch(0.22 0.03 var(--brand-hue));
	--s-color-focus-border: oklch(0.55 0.1 var(--brand-hue));
	--s-color-focus-glow: transparent;

	/* Active/Pressed states */
	--s-color-active-bg: var(--s-brand-850);
	--s-color-active-fg: var(--s-brand-50);
	--s-color-active-border: var(--s-brand-700);

	/* Selected states */
	--s-color-selected-bg: oklch(0.25 0.04 var(--brand-hue));
	--s-color-selected-fg: oklch(0.9 0.03 var(--brand-hue));
	--s-color-selected-border: oklch(0.5 0.08 var(--brand-hue));

	/* Disabled states */
	--s-color-disabled-bg: var(--s-brand-925);
	--s-color-disabled-fg: var(--s-brand-600);
	--s-color-disabled-border: var(--s-brand-850);

	/* Icon colors */
	--s-color-fg-icon: var(--s-brand-100);
	--s-color-fg-icon-muted: var(--s-brand-150);
	--s-color-fg-icon-hover: var(--s-brand-50);

	/* Override alpha variants for dark theme */
	--s-brand-alpha-5: oklch(0.18 0.08 var(--brand-hue) / 0.15);
	--s-brand-alpha-10: oklch(0.18 0.08 var(--brand-hue) / 0.2);
	--s-brand-alpha-20: oklch(0.18 0.08 var(--brand-hue) / 0.25);
	--s-brand-alpha-30: oklch(0.18 0.08 var(--brand-hue) / 0.3);
	--s-brand-alpha-50: oklch(0.18 0.08 var(--brand-hue) / 0.4);

	/* Dark theme shadows */
	--s-shadow-sm: 0 1px 2px oklch(0.18 0.08 var(--brand-hue) / 0.2), 0 1px 3px oklch(0.18 0.08 var(--brand-hue) / 0.12);
	--s-shadow-md: 0 2px 4px oklch(0.18 0.08 var(--brand-hue) / 0.24), 0 4px 8px oklch(0.18 0.08 var(--brand-hue) / 0.16);
	--s-shadow-lg: 0 8px 16px oklch(0.18 0.08 var(--brand-hue) / 0.3), 0 4px 8px oklch(0.18 0.08 var(--brand-hue) / 0.2);
	--s-shadow-xl: 0 12px 24px oklch(0.18 0.08 var(--brand-hue) / 0.36), 0 6px 12px oklch(0.18 0.08 var(--brand-hue) / 0.24);

	/* Additional semantic tokens for dark theme — track elevation levels */
	--s-color-fg-heading: var(--s-brand-50);
	--s-color-fg-code: var(--accent-brand-light);
	--s-color-fg-label: var(--s-brand-150);
	--s-color-bg-card: var(--s-brand-925);
	--s-color-bg-card-hover: var(--s-brand-900);
	--s-color-bg-table-header: var(--s-brand-850);
	--s-color-bg-table-row-hover: var(--s-brand-925);

	/* Navigation colors */
	--s-color-nav-hover-bg: var(--s-brand-900);
	--s-color-nav-active-bg: var(--s-color-bg-strong);
	--s-color-nav-active-fg: var(--s-color-fg-on-strong);
}

/* ===== 14. SITE.CSS BRIDGE (Marketing tokens → Design system) ===== */
:root {
	/* Marketing spacing aliases */
	--sp-3: var(--s-space-1);
	--sp-5: var(--s-space-2);
	--sp-8: var(--s-space-3);
	--sp-13: var(--s-space-4);
	--sp-21: var(--s-space-5);
	--sp-34: var(--s-space-6);
	--sp-55: var(--s-space-7);
	--sp-89: calc(var(--s-space-density) * 89px);
	--sp-144: calc(var(--s-space-density) * 144px);

	/* Marketing surface tokens */
	--surface-0: var(--s-surface-elevation-0-bg);
	--surface-1: var(--s-surface-elevation-1-bg);
	--surface-2: var(--s-surface-elevation-2-bg);
	--surface-card: var(--s-color-bg-card);
	--surface-card-border: var(--s-color-border-subtle);

	/* Marketing text tokens */
	--text-primary: var(--s-color-fg-primary);
	--text-secondary: var(--s-color-fg-muted);
	--text-tertiary: var(--s-color-fg-soft);

	/* Marketing font tokens */
	--font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
	--font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-mono: "Inconsolata", "SF Mono", "Cascadia Code", monospace;

	/* Marketing type scale */
	--text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.833rem);
	--text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
	--text-md: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
	--text-lg: clamp(1.2rem, 1rem + 1vw, 1.44rem);
	--text-xl: clamp(1.4rem, 1.1rem + 1.5vw, 1.728rem);
	--text-2xl: clamp(1.6rem, 1.2rem + 2vw, 2.074rem);
	--text-3xl: clamp(1.8rem, 1.2rem + 3vw, 3rem);

	/* Marketing layout */
	--measure: 65ch;
	--measure-narrow: 45ch;

	/* Marketing accent colors */
	--accent: oklch(50% 0.1 180);
	--accent-hover: oklch(42% 0.1 180);
	--link-marketing: oklch(44% 0.14 180);
	--link-marketing-hover: oklch(36% 0.14 180);
	--brand-dark-ink: oklch(25% 0.026 185);
	--brand-dark-line: oklch(42% 0.034 185);
	--brand-accent-on-dark: oklch(77% 0.044 202);
	--brand-accent-on-dark-hover: oklch(83% 0.042 202);

	/* Marketing menu */
	--menu-bg: oklch(17% 0.026 185);
	--menu-text: oklch(92% 0.01 180);
	--menu-text-secondary: oklch(65% 0.018 180);
	--menu-text-hover: oklch(98% 0.015 180);

	/* Transition */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== 15. RESET ===== */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--s-font-sans);
	background: var(--s-color-bg-app);
	color: var(--s-color-fg-primary);
	font-size: var(--s-font-size-active);
	line-height: var(--s-font-line-height-normal);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}