:root {
    color-scheme: light;

    /* Ink & Vermilion. Color values follow README.website-color-spec.md. */

    /* Core palette - light mode */
    --bg-primary: #F7F4ED;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EEEDE5;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-hover: #F7F4ED;
    --surface-active: #EEEDE5;
    --surface-border: #D3D5C9;

    --text-primary: #202724;
    --text-secondary: #555D54;
    --text-tertiary: #62695E;
    --text-muted: #62695E;
    --text-disabled: #92988C;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #202724;
    --link-visited: #7D3F36;

    --primary: #BD3E2D;
    --primary-hover: #A73526;
    --primary-active: #8E2D21;
    --primary-dark: #8E2D21;
    --primary-light: #F08E78;
    --primary-soft: #F5E2DA;
    --selected-text: #8E2D21;

    --link-color: var(--primary);
    --link-hover: var(--primary-hover);
    --link-active: var(--primary-active);

    --button-primary: #BD3E2D;
    --button-primary-hover: #A73526;
    --button-primary-active: #8E2D21;

    /* Signature hairline uses the theme link color. */
    --thread: #BD3E2D;
    --thread-hover: #A73526;

    /* Product accents use the primary fill and its white foreground. */
    --product-accent: var(--button-primary);
    --product-accent-hover: var(--button-primary-hover);
    --product-accent-foreground: var(--text-on-accent);

    /* Legacy accent names remain for existing consumers; decorative tones are neutral. */
    --accent-violet: var(--text-secondary);
    --accent-violet-hover: var(--text-primary);
    --accent-teal: var(--text-secondary);
    --accent-teal-hover: var(--text-primary);

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(189, 62, 45, 0.14);
    --accent-gold: var(--text-secondary);
    --accent-gold-fill: var(--text-secondary);
    --accent-gold-hover: var(--text-primary);
    --accent-pink: var(--accent-violet);
    --accent-pink-hover: var(--accent-violet-hover);

    /* Status text, solid fills, and paired soft backgrounds. */
    --success: #28633E;
    --success-fill: #28633E;
    --success-soft: #E6EFE4;
    --success-strong: #214E32;
    --warning: #855115;
    --warning-fill: #855115;
    --warning-soft: #F5EACF;
    --warning-strong: #6B4111;
    --error: #9F243D;
    --error-fill: #9F243D;
    --error-soft: #F6E3E7;
    --error-strong: #831D34;
    --info: #345F7A;
    --info-fill: #345F7A;
    --info-soft: #E4ECF1;
    --info-strong: #294B60;

    --border: #D3D5C9;
    --border-light: #EEEDE5;
    --border-input: #7C8276;
    --divider: #D3D5C9;
    --disabled-bg: #EEEDE5;
    --focus-ring: #BD3E2D;
    --focus-ring-inner: #FFFFFF;

    --overlay-soft: rgba(247, 244, 237, 0.80);
    --overlay-muted: rgba(238, 237, 229, 0.88);
    --overlay-strong: rgba(247, 244, 237, 0.94);
    --overlay-backdrop: rgba(32, 39, 36, 0.60);   /* modal backdrop per handoff */
    --overlay-accent: rgba(189, 62, 45, 0.06);
    --grid-line: rgba(32, 39, 36, 0.05);
    --hero-glow: rgba(189, 62, 45, 0.08);
    --spotlight: rgba(189, 62, 45, 0.05);

    /* Ink shadows; existing sizes and opacity are preserved. */
    --shadow-color: #202724;
    --shadow-sm: 0 1px 2px rgba(32, 39, 36, 0.05);
    --shadow-md: 0 8px 24px rgba(32, 39, 36, 0.08);
    --shadow-lg: 0 12px 32px rgba(32, 39, 36, 0.10);
    --shadow-xl: 0 16px 40px rgba(32, 39, 36, 0.12);
    --shadow-2xl: 0 24px 56px rgba(32, 39, 36, 0.14);
    --shadow-primary: 0 8px 24px -12px rgba(189, 62, 45, 0.24);

    --glow-primary: 0 0 0 0 transparent;
    --glow-cyan: 0 0 0 0 transparent;
    --glow-text: none;

    /* Solid fills, not decorative gradients (handoff §1). Gradient tokens
       are kept for structural compatibility and stay single-family. */
    --gradient-primary: linear-gradient(180deg, #BD3E2D 0%, #A73526 100%);
    --gradient-cyan: linear-gradient(180deg, #BD3E2D 0%, #8E2D21 100%);
    --gradient-signature: linear-gradient(135deg, #8E2D21 0%, #BD3E2D 60%, #BD3E2D 130%);
    --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 237, 229, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(238, 237, 229, 0.92) 100%);
    --gradient-text: linear-gradient(180deg, #202724 0%, #555D54 100%);
    --gradient-section-title: linear-gradient(180deg, #202724 0%, #555D54 100%);
    --gradient-display-heading: linear-gradient(180deg, #202724 0%, #555D54 100%);

    /* Motion (handoff §12): micro 120–180ms, overlays 180–240ms. */
    --transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
    --transition-base: 200ms cubic-bezier(0.2, 0, 0, 1);
    --transition-slow: 240ms cubic-bezier(0.2, 0, 0, 1);
    --transition-bounce: 240ms cubic-bezier(0.2, 0, 0, 1);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --space-section-block: clamp(4rem, 7vw, 6rem);
    --space-section-block-mobile: 3.5rem;
    --space-section-header-margin: var(--space-2xl);
    --space-stack-xs: var(--space-xs);
    --space-stack-sm: var(--space-sm);
    --space-stack-md: var(--space-md);
    --space-stack-lg: var(--space-lg);
    --space-stack-xl: var(--space-xl);
    --space-inline-sm: var(--space-sm);
    --space-inline-md: var(--space-md);
    --space-inline-lg: var(--space-lg);
    --space-surface-padding: var(--space-lg);
    --space-surface-padding-lg: var(--space-xl);
    --space-surface-padding-compact: var(--space-md);
    --space-container-inline: var(--space-lg);
    --space-container-inline-mobile: var(--space-md);

    /* Radius (handoff §7): control 8px, card 12px, panel 16px, pill. */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    /* Typography (handoff §6): Inter for product and marketing. Headings
       use weight 650–700 with slightly tight tracking; no second family. */
    --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;

    /* Editorial primitives — hairline rules and ornaments. */
    --rule-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
    --rule-color-soft: color-mix(in srgb, var(--text-primary) 7%, transparent);
    --rule-mark: var(--thread);
    --measure-prose: 64ch;
    --measure-tight: 48ch;
    /* No decorative noise or texture overlays (handoff §1). */
    --paper-grain: none;

    --z-negative: -1;
    --z-base: 0;
    --z-elevate: 1;
    --z-sticky: 100;
    --z-drawer: 200;
    --z-dropdown: 250;
    --z-modal: 300;
    --z-popover: 400;
    --z-toast: 500;

    /* Compatibility aliases used by existing page styles */
    --primary-color: var(--primary);
    --accent-color: var(--accent-cyan);
    --darker-bg: var(--bg-primary);
    --card-bg: var(--bg-secondary);
    --surface-color: var(--surface);
    --border-color: var(--border);
    --card-shadow: var(--shadow-xl);
    --text-on-dark: var(--text-primary);
    --text-on-light: var(--bg-primary);
    --navbar-text: var(--text-primary);
    --transition-speed: var(--transition-base);
    --white: #FFFFFF;
}

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

    /* Ink & Vermilion — dark mode. */

    --bg-primary: #1C2421;
    --bg-secondary: #252E29;
    --bg-tertiary: #2E3932;
    --surface: #252E29;
    --surface-raised: #2E3932;
    --surface-hover: #333F36;
    --surface-active: #333F36;
    --surface-border: #424D43;

    --text-primary: #F7F4ED;
    --text-secondary: #C3CCC0;
    --text-tertiary: #ACB8AC;
    --text-muted: #ACB8AC;
    --text-disabled: #748071;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #202724;
    --link-visited: #D7ADA4;

    --primary: #F08E78;
    --primary-hover: #F4AB99;
    --primary-active: #F7C5B8;
    --primary-dark: #8E2D21;
    --primary-light: #F08E78;
    --primary-soft: #3C2823;
    --selected-text: #F4AB99;

    --link-color: var(--primary);
    --link-hover: var(--primary-hover);
    --link-active: var(--primary-active);

    /* Primary button fills stay the same in both themes. */
    --button-primary: #BD3E2D;
    --button-primary-hover: #A73526;
    --button-primary-active: #8E2D21;

    --thread: #F08E78;
    --thread-hover: #F4AB99;

    --product-accent: var(--button-primary);
    --product-accent-hover: var(--button-primary-hover);
    --product-accent-foreground: var(--text-on-accent);

    --accent-violet: var(--text-secondary);
    --accent-violet-hover: var(--text-primary);
    --accent-teal: var(--text-secondary);
    --accent-teal-hover: var(--text-primary);

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(240, 142, 120, 0.18);
    --accent-gold: var(--text-secondary);
    --accent-gold-fill: var(--text-secondary);
    --accent-gold-hover: var(--text-primary);
    --accent-pink: var(--accent-violet);
    --accent-pink-hover: var(--accent-violet-hover);

    --success: #A3D6AE;
    --success-fill: #28633E;
    --success-soft: #223B2B;
    --success-strong: #C1E6C7;
    --warning: #E8C078;
    --warning-fill: #855115;
    --warning-soft: #403322;
    --warning-strong: #F1D39D;
    --error: #F0A4B4;
    --error-fill: #9F243D;
    --error-soft: #432A33;
    --error-strong: #F5C0CB;
    --info: #A6C7DF;
    --info-fill: #345F7A;
    --info-soft: #263640;
    --info-strong: #C3DBEA;

    --border: #424D43;
    --border-light: #424D43;
    --border-input: #879181;
    --divider: #424D43;
    --disabled-bg: #2E3932;
    --focus-ring: #F08E78;
    --focus-ring-inner: #1C2421;

    --overlay-soft: rgba(37, 46, 41, 0.82);
    --overlay-muted: rgba(46, 57, 50, 0.88);
    --overlay-strong: rgba(28, 36, 33, 0.92);
    --overlay-backdrop: rgba(12, 17, 14, 0.72);   /* modal backdrop per handoff */
    --overlay-accent: rgba(240, 142, 120, 0.12);
    --grid-line: rgba(172, 184, 172, 0.12);
    --hero-glow: rgba(240, 142, 120, 0.12);
    --spotlight: rgba(240, 142, 120, 0.08);

    --rule-color: color-mix(in srgb, var(--text-primary) 20%, transparent);
    --rule-color-soft: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --rule-mark: var(--thread);

    --shadow-color: #0C110E;
    --shadow-sm: 0 1px 2px rgba(12, 17, 14, 0.24);
    --shadow-md: 0 12px 32px rgba(12, 17, 14, 0.30);
    --shadow-lg: 0 16px 40px rgba(12, 17, 14, 0.36);
    --shadow-xl: 0 24px 48px rgba(12, 17, 14, 0.40);
    --shadow-2xl: 0 32px 64px rgba(12, 17, 14, 0.44);
    --shadow-primary: 0 10px 28px -14px rgba(189, 62, 45, 0.30);

    --glow-primary: 0 0 0 0 transparent;
    --glow-cyan: 0 0 0 0 transparent;

    --gradient-primary: linear-gradient(180deg, #BD3E2D 0%, #A73526 100%);
    --gradient-cyan: linear-gradient(180deg, #F08E78 0%, #F08E78 100%);
    --gradient-signature: linear-gradient(135deg, #8E2D21 0%, #BD3E2D 60%, #F08E78 130%);
    --gradient-surface: linear-gradient(145deg, rgba(37, 46, 41, 0.94) 0%, rgba(28, 36, 33, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(66, 77, 67, 0.38) 0%, rgba(28, 36, 33, 0.20) 100%);
    --gradient-text: linear-gradient(180deg, #F7F4ED 0%, #C3CCC0 100%);
    --gradient-section-title: linear-gradient(180deg, #F7F4ED 0%, #C3CCC0 100%);
    --gradient-display-heading: linear-gradient(180deg, #F7F4ED 0%, #C3CCC0 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --bg-primary: #1C2421;
        --bg-secondary: #252E29;
        --bg-tertiary: #2E3932;
        --surface: #252E29;
        --surface-raised: #2E3932;
        --surface-hover: #333F36;
        --surface-active: #333F36;
        --surface-border: #424D43;

        --text-primary: #F7F4ED;
        --text-secondary: #C3CCC0;
        --text-tertiary: #ACB8AC;
        --text-muted: #ACB8AC;
        --text-disabled: #748071;
        --text-on-accent: #FFFFFF;
        --text-on-bright-accent: #202724;
        --link-visited: #D7ADA4;

        --primary: #F08E78;
        --primary-hover: #F4AB99;
        --primary-active: #F7C5B8;
        --primary-dark: #8E2D21;
        --primary-light: #F08E78;
        --primary-soft: #3C2823;
        --selected-text: #F4AB99;

        --link-color: var(--primary);
        --link-hover: var(--primary-hover);
        --link-active: var(--primary-active);

        --button-primary: #BD3E2D;
        --button-primary-hover: #A73526;
        --button-primary-active: #8E2D21;

        --thread: #F08E78;
        --thread-hover: #F4AB99;

        --product-accent: var(--button-primary);
        --product-accent-hover: var(--button-primary-hover);
        --product-accent-foreground: var(--text-on-accent);

        --accent-violet: var(--text-secondary);
        --accent-violet-hover: var(--text-primary);
        --accent-teal: var(--text-secondary);
        --accent-teal-hover: var(--text-primary);

        --accent-cyan: var(--primary);
        --accent-cyan-hover: var(--primary-hover);
        --accent-cyan-glow: rgba(240, 142, 120, 0.18);
        --accent-gold: var(--text-secondary);
        --accent-gold-fill: var(--text-secondary);
        --accent-gold-hover: var(--text-primary);
        --accent-pink: var(--accent-violet);
        --accent-pink-hover: var(--accent-violet-hover);

        --success: #A3D6AE;
        --success-fill: #28633E;
        --success-soft: #223B2B;
        --success-strong: #C1E6C7;
        --warning: #E8C078;
        --warning-fill: #855115;
        --warning-soft: #403322;
        --warning-strong: #F1D39D;
        --error: #F0A4B4;
        --error-fill: #9F243D;
        --error-soft: #432A33;
        --error-strong: #F5C0CB;
        --info: #A6C7DF;
        --info-fill: #345F7A;
        --info-soft: #263640;
        --info-strong: #C3DBEA;

        --border: #424D43;
        --border-light: #424D43;
        --border-input: #879181;
        --divider: #424D43;
        --disabled-bg: #2E3932;
        --focus-ring: #F08E78;
        --focus-ring-inner: #1C2421;

        --overlay-soft: rgba(37, 46, 41, 0.82);
        --overlay-muted: rgba(46, 57, 50, 0.88);
        --overlay-strong: rgba(28, 36, 33, 0.92);
        --overlay-backdrop: rgba(12, 17, 14, 0.72);
        --overlay-accent: rgba(240, 142, 120, 0.12);
        --grid-line: rgba(172, 184, 172, 0.12);
        --hero-glow: rgba(240, 142, 120, 0.12);
        --spotlight: rgba(240, 142, 120, 0.08);

        --rule-color: color-mix(in srgb, var(--text-primary) 20%, transparent);
        --rule-color-soft: color-mix(in srgb, var(--text-primary) 10%, transparent);
        --rule-mark: var(--thread);

        --shadow-color: #0C110E;
        --shadow-sm: 0 1px 2px rgba(12, 17, 14, 0.24);
        --shadow-md: 0 12px 32px rgba(12, 17, 14, 0.30);
        --shadow-lg: 0 16px 40px rgba(12, 17, 14, 0.36);
        --shadow-xl: 0 24px 48px rgba(12, 17, 14, 0.40);
        --shadow-2xl: 0 32px 64px rgba(12, 17, 14, 0.44);
        --shadow-primary: 0 10px 28px -14px rgba(189, 62, 45, 0.30);

        --glow-primary: 0 0 0 0 transparent;
        --glow-cyan: 0 0 0 0 transparent;

        --gradient-primary: linear-gradient(180deg, #BD3E2D 0%, #A73526 100%);
        --gradient-cyan: linear-gradient(180deg, #F08E78 0%, #F08E78 100%);
        --gradient-signature: linear-gradient(135deg, #8E2D21 0%, #BD3E2D 60%, #F08E78 130%);
        --gradient-surface: linear-gradient(145deg, rgba(37, 46, 41, 0.94) 0%, rgba(28, 36, 33, 0.98) 100%);
        --gradient-glass: linear-gradient(180deg, rgba(66, 77, 67, 0.38) 0%, rgba(28, 36, 33, 0.20) 100%);
        --gradient-text: linear-gradient(180deg, #F7F4ED 0%, #C3CCC0 100%);
        --gradient-section-title: linear-gradient(180deg, #F7F4ED 0%, #C3CCC0 100%);
        --gradient-display-heading: linear-gradient(180deg, #F7F4ED 0%, #C3CCC0 100%);
    }
}