/* tokens.css — single source of truth for ALL design tokens (dcs.spa + CMS app).
 * Copyright © 2026 Mark Constable <mc@dcs.spa> (MIT License)
 *
 * Consolidated from base.css (@layer tokens) + site.css (@layer site-tokens colour
 * blocks) per _plan/2026-06-17-css-consolidation-tokenization.md (P1). Loaded FIRST so
 * base.css / site.css / app.css all reference these. Every colour is an oklch() var();
 * shadows + overlays are oklch too. The spacing scale is COMPLETE (0-24, incl. 7 & 9).
 *
 * The master @layer order lives here so the rest of the cascade is established before
 * any rules load: base.css fills reset/tokens/base/components/utilities/animations,
 * site.css fills site-*, and the CMS app.css is UNLAYERED (beats every layer).
 */

@layer reset, tokens, base, components, utilities, animations, site-tokens, site-components, site-utilities;

@layer tokens {
    :root {
        color-scheme: light dark;

        /* Typography scale (app xs-2xl + marketing 3xl-6xl) */
        --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
        --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
        --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
        --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        --text-xl: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
        --text-2xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
        --text-3xl: clamp(1.5rem, 1rem + 2vw, 2rem);
        --text-4xl: clamp(1.75rem, 1rem + 3vw, 2.5rem);
        --text-5xl: clamp(2rem, 1rem + 4vw, 3.5rem);
        --text-6xl: clamp(2.5rem, 1rem + 5vw, 4.5rem);

        /* Spacing scale - COMPLETE 0-24 (incl. --space-7 1.75rem, --space-9 2.25rem) */
        --space-0: 0;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-7: 1.75rem;
        --space-8: 2rem;
        --space-9: 2.25rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;
        --space-24: 6rem;

        /* Border radius - sm/md/lg + marketing xl/2xl/full.
           APPLICATION RULE (app.css): buttons + controls = --radius-lg; panels/cards/
           sections/modals = --radius-xl; pills = --radius-full; smaller only if essential. */
        --radius-sm: 4px;
        --radius-md: 6px;
        --radius-lg: 8px;
        --radius-xl: 16px;
        --radius-2xl: 24px;
        --radius-full: 9999px;

        /* Shadows - oklch black, sm/md/lg + popover/modal (light defaults) */
        --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1);
        --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1);
        --shadow-popover: 0 12px 32px -8px oklch(0% 0 0 / 0.22);
        --shadow-modal: 0 24px 60px -12px oklch(0% 0 0 / 0.28);

        /* Transitions */
        --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --duration-fast: 150ms;
        --duration-base: 200ms;
        --duration-slow: 300ms;
        --duration-medium: 400ms;
        --duration-long: 500ms;
        --transition-fast: var(--duration-fast) var(--ease-out);
        --transition-base: var(--duration-base) var(--ease-out);
        --transition-slow: var(--duration-slow) var(--ease-out);
        --transition-medium: var(--duration-medium) var(--ease-out);
        --transition-long: var(--duration-long) var(--ease-out);

        /* Hover effect */
        --hover-lift: -4px;
        --hover-shadow: var(--shadow-lg);

        /* Line heights */
        --leading-tight: 1.25;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;

        /* Font stacks (marketing Inter/Quicksand is the effective --font-sans) */
        --font-sans: "Inter", "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        --font-heading: "Quicksand", sans-serif;
        --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;

        /* Z-index - dropdown/fixed/toast */
        --z-dropdown: 100;
        --z-fixed: 300;
        --z-toast: 800;

        /* Container & layout */
        --container-lg: 960px;
        --container-xl: 1280px;
        --topnav-height: 4rem;
        --sidebar-width-left: 20%;
        --sidebar-width-right: 20%;
        --sw-l: clamp(10%, var(--sidebar-width-left), 100%);
        --sw-r: clamp(10%, var(--sidebar-width-right), 100%);
        --ctl-h: 2.25rem;

        /* Marketing */
        --hero-bg: url('/img/Server_Room_Dark.webp');
        --particle-opacity: 0.3;

        /* ===== Ocean (H=220) — light defaults ===== */
        --bg-primary:   oklch(98% 0.008 220);
        --bg-secondary: oklch(96% 0.012 220);
        --bg-tertiary:  oklch(92% 0.018 220);
        --fg-primary:   oklch(25% 0.06 220);
        --fg-secondary: oklch(40% 0.08 220);
        --fg-muted:     oklch(50% 0.06 220);
        --accent:       oklch(55% 0.12 220);
        --accent-hover: oklch(60% 0.14 220);
        --accent-fg:    oklch(98% 0.01 220);
        --accent-subtle:oklch(92% 0.025 220);
        --accent-glow:  oklch(55% 0.12 220 / 0.3);
        --border:       oklch(85% 0.02 220);
        --border-muted: oklch(90% 0.015 220);
        /* Semantic (+ hover/subtle for unified buttons & flashes) */
        --success:      oklch(45% 0.15 145);
        --danger:       oklch(55% 0.2 25);
        --warning:      oklch(70% 0.15 85);
        --info:         oklch(58% 0.14 240);
        --success-hover:oklch(40% 0.15 145);
        --danger-hover: oklch(50% 0.2 25);
        --warning-hover:oklch(64% 0.15 85);
        --info-hover:   oklch(52% 0.14 240);
        /* Row hover wash + modal/overlay scrim (theme-invariant darks) */
        --row-hover:    oklch(0% 0 0 / 0.04);
        --overlay:      oklch(20% 0.012 220 / 0.55);
        /* Glass */
        --glass:        oklch(98% 0.008 220);
        --glass-border: oklch(85% 0.02 220 / 0.5);
        --nav-scrolled-bg: oklch(100% 0 0 / 0.95);
    }

    /* Dark (system preference, unless .light pinned) */
    @media (prefers-color-scheme: dark) {
        :root:not(.light) {
            --bg-primary:   oklch(12% 0.015 220);
            --bg-secondary: oklch(16% 0.02 220);
            --bg-tertiary:  oklch(22% 0.025 220);
            --fg-primary:   oklch(95% 0.02 220);
            --fg-secondary: oklch(75% 0.05 220);
            --fg-muted:     oklch(55% 0.04 220);
            --accent:       oklch(75% 0.12 220);
            --accent-hover: oklch(85% 0.1 220);
            --accent-fg:    oklch(15% 0.04 220);
            --accent-subtle:oklch(25% 0.04 220);
            --accent-glow:  oklch(75% 0.12 220 / 0.4);
            --border:       oklch(30% 0.03 220);
            --border-muted: oklch(22% 0.02 220);
            --success:      oklch(70% 0.15 145);
            --danger:       oklch(70% 0.18 25);
            --warning:      oklch(80% 0.15 85);
            --info:         oklch(72% 0.13 240);
            --success-hover:oklch(78% 0.15 145);
            --danger-hover: oklch(78% 0.18 25);
            --warning-hover:oklch(88% 0.15 85);
            --info-hover:   oklch(80% 0.13 240);
            --row-hover:    oklch(100% 0 0 / 0.04);
            --overlay:      oklch(5% 0.01 220 / 0.62);
            --glass:        oklch(16% 0.02 220 / 0.85);
            --glass-border: oklch(30% 0.03 220 / 0.5);
            --nav-scrolled-bg: oklch(12% 0.015 220 / 0.9);
            --particle-opacity: 0.3;
            --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.4), 0 1px 2px -1px oklch(0% 0 0 / 0.4);
            --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.4), 0 2px 4px -2px oklch(0% 0 0 / 0.4);
            --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.4), 0 4px 6px -4px oklch(0% 0 0 / 0.4);
            --shadow-popover: 0 12px 32px -8px oklch(0% 0 0 / 0.55);
            --shadow-modal: 0 24px 60px -12px oklch(0% 0 0 / 0.6);
        }
    }

    /* Dark (toggle) */
    html.dark {
        --bg-primary:   oklch(12% 0.015 220);
        --bg-secondary: oklch(16% 0.02 220);
        --bg-tertiary:  oklch(22% 0.025 220);
        --fg-primary:   oklch(95% 0.02 220);
        --fg-secondary: oklch(75% 0.05 220);
        --fg-muted:     oklch(55% 0.04 220);
        --accent:       oklch(75% 0.12 220);
        --accent-hover: oklch(85% 0.1 220);
        --accent-fg:    oklch(15% 0.04 220);
        --accent-subtle:oklch(25% 0.04 220);
        --accent-glow:  oklch(75% 0.12 220 / 0.4);
        --border:       oklch(30% 0.03 220);
        --border-muted: oklch(22% 0.02 220);
        --success:      oklch(70% 0.15 145);
        --danger:       oklch(70% 0.18 25);
        --warning:      oklch(80% 0.15 85);
        --info:         oklch(72% 0.13 240);
        --success-hover:oklch(78% 0.15 145);
        --danger-hover: oklch(78% 0.18 25);
        --warning-hover:oklch(88% 0.15 85);
        --info-hover:   oklch(80% 0.13 240);
        --row-hover:    oklch(100% 0 0 / 0.04);
        --overlay:      oklch(5% 0.01 220 / 0.62);
        --glass:        oklch(16% 0.02 220 / 0.85);
        --glass-border: oklch(30% 0.03 220 / 0.5);
        --nav-scrolled-bg: oklch(12% 0.015 220 / 0.9);
        --particle-opacity: 0.3;
        --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.4), 0 1px 2px -1px oklch(0% 0 0 / 0.4);
        --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.4), 0 2px 4px -2px oklch(0% 0 0 / 0.4);
        --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.4), 0 4px 6px -4px oklch(0% 0 0 / 0.4);
        --shadow-popover: 0 12px 32px -8px oklch(0% 0 0 / 0.55);
        --shadow-modal: 0 24px 60px -12px oklch(0% 0 0 / 0.6);
    }

    /* Light (toggle) */
    html.light {
        --bg-primary:   oklch(98% 0.008 220);
        --bg-secondary: oklch(96% 0.012 220);
        --bg-tertiary:  oklch(92% 0.018 220);
        --fg-primary:   oklch(25% 0.06 220);
        --fg-secondary: oklch(40% 0.08 220);
        --fg-muted:     oklch(50% 0.06 220);
        --accent:       oklch(55% 0.12 220);
        --accent-hover: oklch(60% 0.14 220);
        --accent-fg:    oklch(98% 0.01 220);
        --accent-subtle:oklch(92% 0.025 220);
        --accent-glow:  oklch(55% 0.12 220 / 0.3);
        --border:       oklch(85% 0.02 220);
        --border-muted: oklch(90% 0.015 220);
        --glass:        oklch(98% 0.008 220);
        --glass-border: oklch(85% 0.02 220 / 0.5);
        --nav-scrolled-bg: oklch(100% 0 0 / 0.95);
        --particle-opacity: 0.15;
    }

    /* ===== Colour schemes (Crimson/Stone/Forest/Sunset/Mono) ===== */
    .scheme-crimson:not(.dark) {
        --bg-primary:   oklch(98% 0.008 25);
        --bg-secondary: oklch(96% 0.012 25);
        --bg-tertiary:  oklch(92% 0.018 25);
        --fg-primary:   oklch(25% 0.04 25);
        --fg-secondary: oklch(40% 0.06 25);
        --fg-muted:     oklch(50% 0.04 25);
        --accent:       oklch(47% 0.2 25);
        --accent-hover: oklch(42% 0.22 25);
        --accent-fg:    oklch(98% 0.01 25);
        --accent-subtle:oklch(92% 0.04 25);
        --accent-glow:  oklch(47% 0.2 25 / 0.3);
        --border:       oklch(85% 0.02 25);
        --border-muted: oklch(90% 0.015 25);
        --glass:        oklch(98% 0.008 25);
        --glass-border: oklch(85% 0.02 25 / 0.5);
        --nav-scrolled-bg: oklch(98% 0.008 25 / 0.9);
    }
    .scheme-crimson.dark {
        --bg-primary:   oklch(10% 0.015 25);
        --bg-secondary: oklch(14% 0.02 25);
        --bg-tertiary:  oklch(20% 0.025 25);
        --fg-primary:   oklch(95% 0.02 25);
        --fg-secondary: oklch(75% 0.04 25);
        --fg-muted:     oklch(55% 0.03 25);
        --accent:       oklch(54% 0.23 25);
        --accent-hover: oklch(60% 0.25 25);
        --accent-fg:    oklch(98% 0.01 25);
        --accent-subtle:oklch(20% 0.05 25);
        --accent-glow:  oklch(54% 0.23 25 / 0.4);
        --border:       oklch(28% 0.03 25);
        --border-muted: oklch(20% 0.02 25);
        --glass:        oklch(14% 0.02 25 / 0.85);
        --glass-border: oklch(28% 0.03 25 / 0.5);
        --nav-scrolled-bg: oklch(10% 0.015 25 / 0.9);
    }
    .scheme-stone:not(.dark) {
        --bg-primary:   oklch(98% 0.005 60);
        --bg-secondary: oklch(96% 0.008 60);
        --bg-tertiary:  oklch(92% 0.012 60);
        --fg-primary:   oklch(25% 0.02 60);
        --fg-secondary: oklch(45% 0.02 60);
        --fg-muted:     oklch(55% 0.015 60);
        --accent:       oklch(45% 0.05 60);
        --accent-hover: oklch(35% 0.06 60);
        --accent-fg:    oklch(98% 0.005 60);
        --accent-subtle:oklch(92% 0.015 60);
        --accent-glow:  oklch(45% 0.05 60 / 0.3);
        --border:       oklch(85% 0.01 60);
        --border-muted: oklch(90% 0.008 60);
        --glass:        oklch(98% 0.005 60);
        --glass-border: oklch(85% 0.01 60 / 0.5);
        --nav-scrolled-bg: oklch(98% 0.005 60 / 0.9);
    }
    .scheme-stone.dark {
        --bg-primary:   oklch(12% 0.01 60);
        --bg-secondary: oklch(16% 0.012 60);
        --bg-tertiary:  oklch(22% 0.015 60);
        --fg-primary:   oklch(95% 0.01 60);
        --fg-secondary: oklch(75% 0.015 60);
        --fg-muted:     oklch(55% 0.015 60);
        --accent:       oklch(80% 0.03 60);
        --accent-hover: oklch(90% 0.02 60);
        --accent-fg:    oklch(20% 0.02 60);
        --accent-subtle:oklch(25% 0.02 60);
        --accent-glow:  oklch(80% 0.03 60 / 0.3);
        --border:       oklch(30% 0.015 60);
        --border-muted: oklch(22% 0.012 60);
        --glass:        oklch(16% 0.012 60 / 0.85);
        --glass-border: oklch(30% 0.015 60 / 0.5);
        --nav-scrolled-bg: oklch(12% 0.01 60 / 0.9);
    }
    .scheme-forest:not(.dark) {
        --bg-primary:   oklch(98% 0.008 150);
        --bg-secondary: oklch(96% 0.012 150);
        --bg-tertiary:  oklch(92% 0.018 150);
        --fg-primary:   oklch(25% 0.06 150);
        --fg-secondary: oklch(40% 0.08 150);
        --fg-muted:     oklch(50% 0.06 150);
        --accent:       oklch(50% 0.12 150);
        --accent-hover: oklch(55% 0.14 150);
        --accent-fg:    oklch(98% 0.01 150);
        --accent-subtle:oklch(92% 0.025 150);
        --accent-glow:  oklch(50% 0.12 150 / 0.3);
        --border:       oklch(85% 0.02 150);
        --border-muted: oklch(90% 0.015 150);
        --glass:        oklch(98% 0.008 150);
        --glass-border: oklch(85% 0.02 150 / 0.5);
        --nav-scrolled-bg: oklch(98% 0.008 150 / 0.9);
    }
    .scheme-forest.dark {
        --bg-primary:   oklch(12% 0.015 150);
        --bg-secondary: oklch(16% 0.02 150);
        --bg-tertiary:  oklch(22% 0.025 150);
        --fg-primary:   oklch(95% 0.02 150);
        --fg-secondary: oklch(75% 0.05 150);
        --fg-muted:     oklch(55% 0.04 150);
        --accent:       oklch(70% 0.12 150);
        --accent-hover: oklch(80% 0.1 150);
        --accent-fg:    oklch(15% 0.04 150);
        --accent-subtle:oklch(25% 0.04 150);
        --accent-glow:  oklch(70% 0.12 150 / 0.3);
        --border:       oklch(30% 0.03 150);
        --border-muted: oklch(22% 0.02 150);
        --glass:        oklch(16% 0.02 150 / 0.85);
        --glass-border: oklch(30% 0.03 150 / 0.5);
        --nav-scrolled-bg: oklch(12% 0.015 150 / 0.9);
    }
    .scheme-sunset:not(.dark) {
        --bg-primary:   oklch(98% 0.01 45);
        --bg-secondary: oklch(96% 0.015 45);
        --bg-tertiary:  oklch(92% 0.02 45);
        --fg-primary:   oklch(30% 0.08 45);
        --fg-secondary: oklch(42% 0.1 45);
        --fg-muted:     oklch(52% 0.08 45);
        --accent:       oklch(60% 0.16 45);
        --accent-hover: oklch(65% 0.18 45);
        --accent-fg:    oklch(98% 0.01 45);
        --accent-subtle:oklch(92% 0.03 45);
        --accent-glow:  oklch(60% 0.16 45 / 0.3);
        --border:       oklch(85% 0.025 45);
        --border-muted: oklch(90% 0.02 45);
        --glass:        oklch(98% 0.01 45);
        --glass-border: oklch(85% 0.025 45 / 0.5);
        --nav-scrolled-bg: oklch(98% 0.01 45 / 0.9);
    }
    .scheme-sunset.dark {
        --bg-primary:   oklch(12% 0.02 45);
        --bg-secondary: oklch(16% 0.025 45);
        --bg-tertiary:  oklch(22% 0.03 45);
        --fg-primary:   oklch(95% 0.025 45);
        --fg-secondary: oklch(75% 0.06 45);
        --fg-muted:     oklch(55% 0.05 45);
        --accent:       oklch(72% 0.14 45);
        --accent-hover: oklch(82% 0.12 45);
        --accent-fg:    oklch(15% 0.05 45);
        --accent-subtle:oklch(25% 0.05 45);
        --accent-glow:  oklch(72% 0.14 45 / 0.3);
        --border:       oklch(30% 0.035 45);
        --border-muted: oklch(22% 0.025 45);
        --glass:        oklch(16% 0.025 45 / 0.85);
        --glass-border: oklch(30% 0.035 45 / 0.5);
        --nav-scrolled-bg: oklch(12% 0.02 45 / 0.9);
    }
    .scheme-mono:not(.dark) {
        --bg-primary:   oklch(98% 0 0);
        --bg-secondary: oklch(96% 0 0);
        --bg-tertiary:  oklch(92% 0 0);
        --fg-primary:   oklch(20% 0 0);
        --fg-secondary: oklch(40% 0 0);
        --fg-muted:     oklch(55% 0 0);
        --accent:       oklch(25% 0 0);
        --accent-hover: oklch(35% 0 0);
        --accent-fg:    oklch(98% 0 0);
        --accent-subtle:oklch(90% 0 0);
        --accent-glow:  oklch(25% 0 0 / 0.2);
        --border:       oklch(85% 0 0);
        --border-muted: oklch(90% 0 0);
        --glass:        oklch(98% 0 0);
        --glass-border: oklch(85% 0 0 / 0.5);
        --nav-scrolled-bg: oklch(100% 0 0 / 0.95);
    }
    .scheme-mono.dark {
        --bg-primary:   oklch(10% 0 0);
        --bg-secondary: oklch(15% 0 0);
        --bg-tertiary:  oklch(22% 0 0);
        --fg-primary:   oklch(95% 0 0);
        --fg-secondary: oklch(75% 0 0);
        --fg-muted:     oklch(55% 0 0);
        --accent:       oklch(85% 0 0);
        --accent-hover: oklch(92% 0 0);
        --accent-fg:    oklch(12% 0 0);
        --accent-subtle:oklch(25% 0 0);
        --accent-glow:  oklch(85% 0 0 / 0.3);
        --border:       oklch(30% 0 0);
        --border-muted: oklch(22% 0 0);
        --glass:        oklch(15% 0 0 / 0.85);
        --glass-border: oklch(30% 0 0 / 0.5);
        --nav-scrolled-bg: oklch(10% 0 0 / 0.9);
    }
}