/**
 * Sortcode Theme Design Tokens
 *
 * Usage rules:
 * 1. Reference semantic tokens in component styles. Do not hardcode palette values outside this file.
 * 2. Prefer status surface tokens for alerts and badges instead of tinting colors inline.
 * 3. Keep print-specific overrides in component styles; screen UI should resolve through the active theme token set.
 * 4. When adding a new component, reuse spacing, radius, shadow, blur, and typography tokens before
 *    introducing any new custom property.
 *
 * See docs/design-tokens.md for the full token contract and implementation notes.
 */
:root,
:root[data-theme="light"],
[data-theme="light"] {
    color-scheme: light;

    /* Light mode baseline palette */
    --bg-primary: #ffffff;
    --bg-surface: #f5f7fa;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --accent: #0052ff;
    --success: #00a36c;
    --header-glass: rgba(255, 255, 255, 0.8);

    /* Theme-specific palette extensions */
    --danger: #e53e3e;
    --accent-hover: #003ec2;
    --accent-surface: #e8f0ff;
    --success-surface: #e6f6ef;
    --danger-surface: #fdecec;
    --text-muted: #718096;
    --text-on-accent: #ffffff;
    --text-on-contrast: #0f172a;
    --border-subtle: rgba(26, 32, 44, 0.12);
    --border-strong: rgba(26, 32, 44, 0.18);
    --border-accent: rgba(0, 82, 255, 0.24);
    --border-success: rgba(0, 163, 108, 0.24);
    --border-danger: rgba(229, 62, 62, 0.2);
    --focus-ring-color: rgba(0, 82, 255, 0.28);
    --surface-base: var(--bg-surface);
    --surface-card: #ffffff;
    --surface-panel: var(--bg-surface);
    --surface-overlay: rgba(245, 247, 250, 0.96);
    --surface-hover: #edf2f7;
    --surface-header: var(--header-glass);
    --surface-header-fallback: rgba(255, 255, 255, 0.96);
    --surface-header-hover: var(--accent-surface);
    --surface-footer: linear-gradient(180deg, #eef3f8 0%, #e8eef5 100%);
    --surface-footer-panel: rgba(255, 255, 255, 0.84);
    --surface-footer-hover: #f8fbff;
    --text-header: var(--text-primary);
    --text-header-muted: var(--text-muted);
    --text-header-hover: var(--accent);
    --text-footer: #243043;
    --text-footer-muted: #5f6c80;
    --text-footer-hover: var(--accent);
    --border-header: var(--border-subtle);
    --border-footer: var(--border-subtle);
    --border-header-hover: var(--border-accent);
    --border-footer-hover: var(--border-accent);
    --focus-header: var(--focus-ring-color);
    --focus-footer: var(--focus-ring-color);
    --header-shell-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    --header-panel-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    --footer-panel-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    --chrome-badge-bg: rgba(255, 255, 255, 0.78);
    --chrome-badge-border: rgba(26, 32, 44, 0.1);
    --chrome-badge-text: #243043;
    --chrome-badge-muted: #5f6c80;
    --chrome-link-surface: rgba(255, 255, 255, 0.72);
    --chrome-link-surface-hover: #f8fbff;
    --chrome-link-border: rgba(26, 32, 44, 0.08);
    --chrome-link-border-hover: rgba(0, 82, 255, 0.18);
    --chrome-brand-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(232, 240, 255, 0.96));
    --chrome-brand-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    --chrome-status-surface: rgba(255, 255, 255, 0.78);
    --theme-toggle-button-bg: rgba(255, 255, 255, 0.72);
    --theme-toggle-button-bg-hover: #ffffff;
    --theme-toggle-button-border: var(--border-header);
    --theme-toggle-button-border-hover: var(--border-header-hover);
    --theme-toggle-label-color: var(--text-header);
    --theme-toggle-label-active: var(--accent);
    --theme-toggle-track-bg: var(--accent-surface);
    --theme-toggle-track-border: var(--border-accent);
    --theme-toggle-thumb-bg: var(--accent);
    --theme-toggle-thumb-shadow: 0 6px 16px rgba(0, 82, 255, 0.28);
    --theme-toggle-icon-active: var(--accent);
    --theme-toggle-icon-inactive: var(--text-header-muted);
    --tool-surface: #ffffff;
    --tool-surface-muted: rgba(255, 255, 255, 0.82);
    --tool-stage-bg: rgba(255, 255, 255, 0.72);
    --tool-section-bg: #ffffff;
    --tool-focus-surface: #f0f4ff;
    --tool-focus-border: rgba(0, 82, 255, 0.22);
    --tool-input-bg: #ffffff;
    --tool-input-border: rgba(26, 32, 44, 0.14);
    --tool-input-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
    --tool-soft-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    --tool-elevated-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
    --tool-chip-bg: #edf2f7;
    --tool-chip-border: rgba(26, 32, 44, 0.08);
    --tool-chip-text: #1a202c;
    --tool-chip-muted: #4a5568;
    --tool-secondary-button-bg: #ffffff;
    --tool-secondary-button-bg-hover: #f8fbff;
    --tool-secondary-button-border: rgba(26, 32, 44, 0.12);
    --metadata-technical-bg: rgba(255, 255, 255, 0.9);
    --metadata-technical-border: rgba(26, 32, 44, 0.1);
    --metadata-technical-label: #5f6c80;
    --metadata-technical-value: #1a202c;
    --metadata-technical-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    --anatomy-shell-bg: linear-gradient(180deg, rgba(245, 247, 250, 0.96), rgba(237, 242, 247, 0.92));
    --anatomy-shell-border: rgba(26, 32, 44, 0.08);
    --anatomy-shell-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    --anatomy-card-bg: rgba(255, 255, 255, 0.96);
    --anatomy-card-border: rgba(26, 32, 44, 0.08);
    --anatomy-card-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    --anatomy-segment-bg: #ffffff;
    --anatomy-segment-border: rgba(26, 32, 44, 0.08);
    --anatomy-segment-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    --anatomy-segment-label: #5f6c80;
    --anatomy-segment-value: #1a202c;
    --anatomy-icon-bg: var(--accent-surface);
    --anatomy-icon-border: var(--border-accent);
    --anatomy-icon-color: var(--accent);
    --map-sea: #0b1722;
    --map-sea-glow: rgba(22, 86, 120, 0.45);
    --map-sea-border: rgba(9, 36, 52, 0.45);
    --map-land: #142c3b;
    --map-land-stroke: #07131b;
    --map-marker-featured: #ff7a2f;
    --map-marker-featured-glow: rgba(255, 122, 47, 0.55);
    --map-marker-primary: #26c3d9;
    --map-marker-primary-glow: rgba(38, 195, 217, 0.5);
    --map-marker-secondary: #2d6cff;
    --map-marker-secondary-glow: rgba(45, 108, 255, 0.45);
    --map-region-featured-fill: rgba(255, 122, 47, 0.22);
    --map-region-featured-fill-hover: rgba(255, 122, 47, 0.32);
    --map-region-featured-stroke: rgba(255, 122, 47, 0.7);
    --map-region-primary-fill: rgba(38, 195, 217, 0.18);
    --map-region-primary-fill-hover: rgba(38, 195, 217, 0.28);
    --map-region-primary-stroke: rgba(38, 195, 217, 0.6);
    --map-region-secondary-fill: rgba(45, 108, 255, 0.16);
    --map-region-secondary-fill-hover: rgba(45, 108, 255, 0.26);
    --map-region-secondary-stroke: rgba(45, 108, 255, 0.55);
    --map-region-selected-fill: rgba(255, 122, 47, 0.28);
    --map-region-selected-stroke: rgba(255, 122, 47, 0.9);

    /* Semantic tokens for shared components */
    --cta-primary-bg: var(--accent);
    --cta-primary-bg-hover: var(--accent-hover);
    --cta-primary-text: var(--text-on-accent);
    --cta-primary-shadow: 0 10px 24px rgba(0, 82, 255, 0.18);
    --badge-metadata-bg: var(--accent-surface);
    --badge-metadata-border: var(--border-accent);
    --badge-metadata-text: var(--accent);
    --badge-status-neutral-bg: var(--surface-panel);
    --badge-status-neutral-border: var(--border-strong);
    --badge-status-neutral-text: var(--text-secondary);
    --badge-status-accent-bg: var(--accent-surface);
    --badge-status-accent-border: var(--border-accent);
    --badge-status-accent-text: var(--accent);
    --badge-status-success-bg: var(--success-surface);
    --badge-status-success-border: var(--border-success);
    --badge-status-success-text: #0b6b4a;
    --badge-status-danger-bg: var(--danger-surface);
    --badge-status-danger-border: var(--border-danger);
    --badge-status-danger-text: #9b1c1c;
    --surface-success: var(--badge-status-success-bg);
    --surface-danger: var(--badge-status-danger-bg);
    --surface-badge: var(--badge-metadata-bg);
    --surface-status-badge: var(--badge-status-accent-bg);
    --text-status-badge: var(--badge-status-accent-text);
    --border-status-badge: var(--badge-status-accent-border);
    --card-bg: var(--surface-card);
    --card-border: var(--border-subtle);
    --card-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    --card-shadow-elevated: 0 20px 48px rgba(15, 23, 42, 0.12);
    --card-highlight-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.94)),
        radial-gradient(circle at top, rgba(0, 82, 255, 0.1), transparent 40%);
    --card-result-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.94)),
        radial-gradient(circle at top right, rgba(0, 82, 255, 0.08), transparent 30%);
    --card-code-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.94)),
        radial-gradient(circle at top, rgba(0, 82, 255, 0.12), transparent 55%);
    --shadow-sm: var(--card-shadow);
    --shadow-md: var(--card-shadow-elevated);
    --focus-ring: 0 0 0 3px var(--focus-ring-color);
    --shadow-focus: var(--focus-ring);
    --shadow-glow-success: 0 0 0 4px rgba(11, 107, 74, 0.12);
    --mobile-nav-overlay-surface: rgba(255, 255, 255, 0.98);
    --mobile-nav-backdrop: rgba(26, 32, 44, 0.2);

    /* Legacy aliases for existing theme rules */
    --primary-color: var(--cta-primary-bg);
    --primary-hover: var(--cta-primary-bg-hover);
    --bg-color: var(--bg-primary);
    --surface-color: var(--surface-card);
    --text-main: var(--text-primary);
    --border-color: var(--border-subtle);
    --error-color: var(--badge-status-danger-text);
    --success-color: var(--badge-status-success-text);
}

:root[data-theme="dark"],
[data-theme="dark"] {
    color-scheme: dark;

    /* Dark mode palette overrides */
    --bg-primary: #0a0b0d;
    --bg-surface: #10151c;
    --text-primary: #f5f7fa;
    --text-secondary: #d8e0ea;
    --accent: #00f2ff;
    --success: #00d084;
    --header-glass: rgba(10, 11, 13, 0.85);

    /* Theme-specific palette extensions */
    --danger: #ff3b30;
    --accent-hover: #7cf8ff;
    --accent-surface: rgba(0, 242, 255, 0.12);
    --success-surface: rgba(0, 208, 132, 0.14);
    --danger-surface: rgba(255, 59, 48, 0.14);
    --text-muted: #9fabb8;
    --text-on-accent: #041316;
    --text-on-contrast: #f5f7fa;
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.18);
    --border-accent: rgba(0, 242, 255, 0.42);
    --border-success: rgba(0, 208, 132, 0.32);
    --border-danger: rgba(255, 59, 48, 0.32);
    --focus-ring-color: rgba(0, 242, 255, 0.34);
    --surface-base: rgba(255, 255, 255, 0.03);
    --surface-card: rgba(255, 255, 255, 0.04);
    --surface-panel: rgba(255, 255, 255, 0.06);
    --surface-overlay: rgba(13, 16, 21, 0.94);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --surface-header: var(--header-glass);
    --surface-header-fallback: rgba(10, 11, 13, 0.96);
    --surface-header-hover: var(--accent-surface);
    --surface-footer: #0a0b0d;
    --surface-footer-panel: rgba(255, 255, 255, 0.06);
    --surface-footer-hover: var(--accent-surface);
    --text-header: var(--text-primary);
    --text-header-muted: var(--text-muted);
    --text-header-hover: var(--accent-hover);
    --text-footer: var(--text-secondary);
    --text-footer-muted: var(--text-muted);
    --text-footer-hover: var(--accent-hover);
    --border-header: var(--border-subtle);
    --border-footer: var(--border-subtle);
    --border-header-hover: var(--border-accent);
    --border-footer-hover: var(--border-accent);
    --focus-header: var(--focus-ring-color);
    --focus-footer: var(--focus-ring-color);
    --header-shell-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    --header-panel-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    --footer-panel-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    --chrome-badge-bg: rgba(255, 255, 255, 0.06);
    --chrome-badge-border: rgba(255, 255, 255, 0.12);
    --chrome-badge-text: var(--text-footer);
    --chrome-badge-muted: var(--text-footer-muted);
    --chrome-link-surface: rgba(255, 255, 255, 0.04);
    --chrome-link-surface-hover: rgba(255, 255, 255, 0.1);
    --chrome-link-border: rgba(255, 255, 255, 0.08);
    --chrome-link-border-hover: var(--border-accent);
    --chrome-brand-surface: linear-gradient(145deg, var(--surface-panel), var(--surface-header-hover));
    --chrome-brand-shadow: var(--header-shadow);
    --chrome-status-surface: rgba(255, 255, 255, 0.04);
    --theme-toggle-button-bg: rgba(10, 11, 13, 0.48);
    --theme-toggle-button-bg-hover: rgba(16, 21, 28, 0.82);
    --theme-toggle-button-border: var(--border-header);
    --theme-toggle-button-border-hover: var(--border-header-hover);
    --theme-toggle-label-color: var(--text-header);
    --theme-toggle-label-active: var(--accent);
    --theme-toggle-track-bg: var(--accent-surface);
    --theme-toggle-track-border: var(--border-accent);
    --theme-toggle-thumb-bg: var(--accent);
    --theme-toggle-thumb-shadow: 0 6px 16px rgba(0, 242, 255, 0.24);
    --theme-toggle-icon-active: var(--accent);
    --theme-toggle-icon-inactive: var(--text-header-muted);
    --tool-surface: rgba(255, 255, 255, 0.05);
    --tool-surface-muted: rgba(255, 255, 255, 0.04);
    --tool-stage-bg: rgba(255, 255, 255, 0.03);
    --tool-section-bg: rgba(255, 255, 255, 0.04);
    --tool-focus-surface: rgba(0, 242, 255, 0.08);
    --tool-focus-border: rgba(0, 242, 255, 0.24);
    --tool-input-bg: rgba(255, 255, 255, 0.05);
    --tool-input-border: rgba(255, 255, 255, 0.12);
    --tool-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tool-soft-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    --tool-elevated-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
    --tool-chip-bg: rgba(255, 255, 255, 0.06);
    --tool-chip-border: rgba(255, 255, 255, 0.1);
    --tool-chip-text: var(--text-primary);
    --tool-chip-muted: var(--text-secondary);
    --tool-secondary-button-bg: rgba(255, 255, 255, 0.06);
    --tool-secondary-button-bg-hover: rgba(255, 255, 255, 0.1);
    --tool-secondary-button-border: rgba(255, 255, 255, 0.12);
    --metadata-technical-bg: rgba(255, 255, 255, 0.05);
    --metadata-technical-border: rgba(255, 255, 255, 0.1);
    --metadata-technical-label: var(--text-muted);
    --metadata-technical-value: var(--text-primary);
    --metadata-technical-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    --anatomy-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
    --anatomy-shell-border: rgba(255, 255, 255, 0.08);
    --anatomy-shell-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
    --anatomy-card-bg: rgba(255, 255, 255, 0.05);
    --anatomy-card-border: rgba(255, 255, 255, 0.1);
    --anatomy-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    --anatomy-segment-bg: rgba(255, 255, 255, 0.06);
    --anatomy-segment-border: rgba(255, 255, 255, 0.1);
    --anatomy-segment-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    --anatomy-segment-label: var(--text-muted);
    --anatomy-segment-value: var(--text-primary);
    --anatomy-icon-bg: var(--accent-surface);
    --anatomy-icon-border: var(--border-accent);
    --anatomy-icon-color: var(--accent);
    --map-sea: #07131c;
    --map-sea-glow: rgba(0, 242, 255, 0.18);
    --map-sea-border: rgba(0, 0, 0, 0.45);
    --map-land: #102635;
    --map-land-stroke: rgba(0, 0, 0, 0.6);
    --map-marker-featured: #ff8b4b;
    --map-marker-featured-glow: rgba(255, 139, 75, 0.55);
    --map-marker-primary: #29d7ea;
    --map-marker-primary-glow: rgba(41, 215, 234, 0.55);
    --map-marker-secondary: #4c7dff;
    --map-marker-secondary-glow: rgba(76, 125, 255, 0.5);
    --map-region-featured-fill: rgba(255, 139, 75, 0.24);
    --map-region-featured-fill-hover: rgba(255, 139, 75, 0.34);
    --map-region-featured-stroke: rgba(255, 139, 75, 0.72);
    --map-region-primary-fill: rgba(41, 215, 234, 0.18);
    --map-region-primary-fill-hover: rgba(41, 215, 234, 0.3);
    --map-region-primary-stroke: rgba(41, 215, 234, 0.62);
    --map-region-secondary-fill: rgba(76, 125, 255, 0.18);
    --map-region-secondary-fill-hover: rgba(76, 125, 255, 0.3);
    --map-region-secondary-stroke: rgba(76, 125, 255, 0.58);
    --map-region-selected-fill: rgba(255, 139, 75, 0.3);
    --map-region-selected-stroke: rgba(255, 139, 75, 0.92);

    /* Semantic tokens for shared components */
    --cta-primary-bg: var(--accent);
    --cta-primary-bg-hover: var(--accent-hover);
    --cta-primary-text: var(--text-on-accent);
    --cta-primary-shadow: 0 10px 24px rgba(0, 242, 255, 0.16);
    --badge-metadata-bg: var(--accent-surface);
    --badge-metadata-border: var(--border-accent);
    --badge-metadata-text: var(--accent);
    --badge-status-neutral-bg: var(--surface-panel);
    --badge-status-neutral-border: var(--border-strong);
    --badge-status-neutral-text: var(--text-secondary);
    --badge-status-accent-bg: var(--accent-surface);
    --badge-status-accent-border: var(--border-accent);
    --badge-status-accent-text: var(--accent);
    --badge-status-success-bg: var(--success-surface);
    --badge-status-success-border: var(--border-success);
    --badge-status-success-text: var(--success);
    --badge-status-danger-bg: var(--danger-surface);
    --badge-status-danger-border: var(--border-danger);
    --badge-status-danger-text: var(--danger);
    --surface-success: var(--badge-status-success-bg);
    --surface-danger: var(--badge-status-danger-bg);
    --surface-badge: var(--badge-metadata-bg);
    --surface-status-badge: var(--badge-status-accent-bg);
    --text-status-badge: var(--badge-status-accent-text);
    --border-status-badge: var(--badge-status-accent-border);
    --card-bg: var(--surface-card);
    --card-border: var(--border-subtle);
    --card-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    --card-shadow-elevated: 0 20px 48px rgba(0, 0, 0, 0.28);
    --card-highlight-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at top, rgba(0, 242, 255, 0.08), transparent 40%);
    --card-result-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        radial-gradient(circle at top right, rgba(0, 242, 255, 0.08), transparent 30%);
    --card-code-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        radial-gradient(circle at top, rgba(0, 242, 255, 0.1), transparent 55%);
    --shadow-sm: var(--card-shadow);
    --shadow-md: var(--card-shadow-elevated);
    --focus-ring: 0 0 0 3px var(--focus-ring-color);
    --shadow-focus: var(--focus-ring);
    --shadow-glow-success: 0 0 0 4px rgba(0, 208, 132, 0.18);
    --mobile-nav-overlay-surface: rgba(10, 11, 13, 0.98);
    --mobile-nav-backdrop: rgba(10, 11, 13, 0.9);

    /* Legacy aliases for existing theme rules */
    --primary-color: var(--cta-primary-bg);
    --primary-hover: var(--cta-primary-bg-hover);
    --bg-color: var(--bg-primary);
    --surface-color: var(--surface-card);
    --text-main: var(--text-primary);
    --border-color: var(--border-subtle);
    --error-color: var(--badge-status-danger-text);
    --success-color: var(--badge-status-success-text);
}

:root {

    /* Typography */
    --font-primary: "Sora", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-metadata: "JetBrains Mono", "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --font-family-sans: var(--font-primary);
    --font-family-display: var(--font-primary);
    --font-family-mono: var(--font-metadata);
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-body: 1rem;
    --font-size-body-lg: 1.125rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-meta: 0.8125rem;
    --font-size-mono: 0.875rem;
    --font-size-display: clamp(2.25rem, 4vw, 3.5rem);
    --font-size-heading-1: clamp(2.5rem, 5vw, 4rem);
    --font-size-heading-2: clamp(1.875rem, 3vw, 2.625rem);
    --font-size-heading-3: clamp(1.5rem, 2.25vw, 2rem);
    --font-size-heading-4: clamp(1.125rem, 1.6vw, 1.375rem);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-tight: 1.1;
    --line-height-heading: 1.15;
    --line-height-meta: 1.4;
    --letter-spacing-premium: -0.02em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-headline: -0.035em;
    --letter-spacing-wide: 0.05em;

    /* Layout and spacing */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    --space-4xl: 3.75rem;
    --container-width: 50rem;
    --site-chrome-width: 72rem;
    --wp-admin-bar-height-desktop: 32px;
    --wp-admin-bar-height-mobile: 46px;

    /* Radius and blur */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;
    --blur-sm: 8px;
    --blur-md: 16px;

    /* Header and footer tokens */
    --site-chrome-inline-padding: var(--space-lg);
    --header-padding-block: var(--space-sm);
    --footer-padding-block: var(--space-xl);
    --header-radius: var(--radius-lg);
    --footer-radius: var(--radius-lg);
    --header-shadow: var(--shadow-sm);
    --footer-shadow: var(--shadow-sm);
    --header-blur: 20px;
    --footer-blur: var(--blur-sm);
    --header-min-height: 4.5rem;
    --header-sticky-top: 0px;
    --header-z-index: 1200;
    --header-cluster-gap: var(--space-lg);
    --header-nav-gap: var(--space-2xs);
    --header-meta-max-width: 28ch;
    --header-nav-link-padding-block: 0.625rem;
    --header-nav-link-padding-inline: 0.875rem;
    --site-chrome-link-radius: var(--radius-sm);
    --brand-mark-size: 2.75rem;
    --brand-mark-frame-size: 1.95rem;
    --brand-mark-core-size: 0.625rem;
    --brand-mark-beam-width: 0.375rem;
    --brand-mark-rotation: -12deg;
    --brand-lockup-gap: var(--space-sm);
    --brand-eyebrow-size: 0.7rem;
    --brand-name-size: 1.1rem;
    --brand-name-letter-spacing: 0.16em;
    --brand-eyebrow-letter-spacing: 0.28em;
    --header-status-gap: var(--space-xs);
    --header-status-min-width: 15rem;
    --header-status-detail-size: var(--font-size-xs);
    --header-actions-gap: var(--space-sm);
    --theme-toggle-height: 2.75rem;
    --theme-toggle-padding-inline: var(--space-sm);
    --theme-toggle-gap: var(--space-sm);
    --theme-toggle-track-width: 3.5rem;
    --theme-toggle-track-height: 2rem;
    --theme-toggle-track-padding: 0.25rem;
    --theme-toggle-thumb-size: 1.5rem;
    --theme-toggle-icon-size: 0.875rem;
    --theme-motion-duration: 300ms;
    --theme-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
    --theme-motion-scale-from: 0.985;
    --theme-motion-opacity-from: 0.96;
    --theme-toggle-transition-duration: var(--theme-motion-duration);
    --theme-toggle-transition-easing: var(--theme-motion-easing);
    --mobile-nav-z-index: 1300;
    --mobile-nav-max-width: 34rem;
    --mobile-nav-toggle-gap: var(--space-xs);
    --mobile-nav-toggle-size: 2.75rem;
    --mobile-nav-toggle-line-width: 1.125rem;
    --mobile-nav-toggle-line-height: 2px;
    --mobile-nav-toggle-line-gap: 0.25rem;
    --mobile-nav-panel-padding: var(--space-lg);
    --mobile-nav-group-gap: var(--space-xl);
    --mobile-nav-link-gap: var(--space-sm);
    --mobile-nav-link-size: clamp(1.5rem, 4vw, 2rem);
    --mobile-nav-link-delay-step: 60ms;
    --mobile-nav-transition-duration: 240ms;
    --mobile-nav-transition-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
    --footer-grid-gap: var(--space-xl);
    --footer-column-min-width: 14rem;
    --footer-panel-padding: var(--space-lg);
    --footer-link-min-height: 4.5rem;
    --footer-meta-gap: var(--space-md);
    --footer-meta-min-width: 16rem;
    --footer-icon-size: 1.75rem;
}