:root {
    color-scheme: light;

    /* ------------------------------------------------------------------
       AditiKraft design system — light mode.
       Adopted from the approved design handoff (nexora_design_handoff/;
       "NEXORA" is a placeholder name for AditiKraft). Brand Blue is the
       only primary interaction color; violet, teal, and amber are
       supporting accents. Calm neutral slate surfaces, solid fills, clear
       borders, subtle elevation.
       Narrative, rules, and verified ratios live in
       README.website-color-spec.md — the source of truth.
       ------------------------------------------------------------------ */

    /* Core palette - light mode */
    --bg-primary: #F8FAFC;   /* page canvas */
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-hover: #F8FAFC;
    --surface-active: #F1F5F9;
    --surface-border: #E2E8F0;

    --text-primary: #0F172A;   /* 17.06:1 on canvas (AAA) */
    --text-secondary: #475569; /* 7.24:1 (AAA) */
    --text-tertiary: #64748B;  /* 4.55:1 (AA) */
    --text-muted: #94A3B8;
    --text-disabled: #94A3B8;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #0F172A;
    --link-visited: #6D28D9;   /* violet-700 — 6.79:1 (AA) */

    --primary: #2563EB;        /* Brand Blue — 4.94:1 as text (AA); white text 5.17:1 */
    --primary-hover: #1D4ED8;  /* white text 6.70:1 */
    --primary-active: #1E40AF; /* white text 8.72:1 */
    --primary-dark: #1E40AF;
    --primary-light: #60A5FA;
    --primary-soft: #DBEAFE;   /* selected backgrounds, light badges */

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

    --button-primary: #2563EB;
    --button-primary-hover: #1D4ED8;
    --button-primary-active: #1E40AF;

    /* Signature hairline — thin Brand Blue rule at the top of the page.
       One small ritual mark; it never grows beyond 3px. */
    --thread: #2563EB;
    --thread-hover: #1D4ED8;

    /* Product accent slot — brand architecture. Each product site may
       override this trio with one approved accent (AA in both modes,
       distinct from semantic colors and Brand Blue). Amber is not
       available as a product accent (it is the warning/premium marker).
       Defaults to Brand Blue so unassigned products stay on-brand. */
    --product-accent: var(--primary);
    --product-accent-hover: var(--primary-hover);
    --product-accent-foreground: var(--text-on-accent); /* white on #2563EB — 5.17:1 */

    /* Supporting accents (handoff §9): violet = premium/AI/creative,
       teal = analytics/automation/integrations. At most one supporting
       accent inside a normal card or component. */
    --accent-violet: #7C3AED;      /* 5.45:1 as text (AA) */
    --accent-violet-hover: #6D28D9;
    --accent-teal: #0D9488;        /* icons/fills; 3.58:1 — not for small text on canvas */
    --accent-teal-hover: #0F766E;

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(37, 99, 235, 0.14);
    --accent-gold: #B45309;      /* amber text tone — 4.80:1 (AA) */
    --accent-gold-fill: #F59E0B; /* amber fill; pair with ink text, 8.31:1 — never white */
    --accent-gold-hover: #92400E;
    --accent-pink: var(--accent-violet);
    --accent-pink-hover: var(--accent-violet-hover);

    /* Semantic feedback. The single tokens are text-safe (AA on canvas)
       because existing components use them as text over self-mixed soft
       tints. The handoff's badge/soft system is exposed via the -fill,
       -soft, and -strong variants. */
    --success: #15803D;        /* 4.79:1 (AA) */
    --success-fill: #16A34A;
    --success-soft: #DCFCE7;
    --success-strong: #166534; /* text on soft — 6.49:1 */
    --warning: #B45309;        /* 4.80:1 (AA) */
    --warning-fill: #D97706;
    --warning-soft: #FEF3C7;
    --warning-strong: #92400E; /* 6.37:1 on soft */
    --error: #DC2626;          /* 4.62:1 (AA) */
    --error-fill: #DC2626;
    --error-soft: #FEE2E2;
    --error-strong: #991B1B;   /* 6.80:1 on soft */
    --info: #2563EB;           /* 4.94:1 (AA) */
    --info-fill: #2563EB;
    --info-soft: #DBEAFE;
    --info-strong: #1E40AF;    /* 7.15:1 on soft */

    --border: #E2E8F0;
    --border-light: #F1F5F9;
    --border-input: #CBD5E1;   /* handoff Border Strong; focus border switches to Brand Blue */
    --divider: #E2E8F0;
    --disabled-bg: #F1F5F9;
    --focus-ring: #93C5FD;
    --focus-ring-inner: #FFFFFF;

    --overlay-soft: rgba(248, 250, 252, 0.80);
    --overlay-muted: rgba(241, 245, 249, 0.88);
    --overlay-strong: rgba(248, 250, 252, 0.94);
    --overlay-backdrop: rgba(15, 23, 42, 0.60);   /* modal backdrop per handoff */
    --overlay-accent: rgba(37, 99, 235, 0.06);
    --grid-line: rgba(15, 23, 42, 0.05);
    --hero-glow: rgba(37, 99, 235, 0.08);
    --spotlight: rgba(37, 99, 235, 0.05);

    /* Slate-ink shadows; borders carry structure, shadows only elevation. */
    --shadow-color: #0F172A;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
    --shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.12);
    --shadow-2xl: 0 24px 56px rgba(15, 23, 42, 0.14);
    --shadow-primary: 0 8px 24px -12px rgba(37, 99, 235, 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, #2563EB 0%, #1D4ED8 100%);
    --gradient-cyan: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
    --gradient-signature: linear-gradient(135deg, #1E40AF 0%, #2563EB 60%, #3B82F6 130%);
    --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 245, 249, 0.92) 100%);
    --gradient-text: linear-gradient(180deg, #0F172A 0%, #334155 100%);
    --gradient-section-title: linear-gradient(180deg, #0F172A 0%, #334155 100%);
    --gradient-display-heading: linear-gradient(180deg, #0F172A 0%, #334155 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;

    /* AditiKraft design system — dark mode.
       Layered navy surfaces, never pure black. Depth comes from surface
       steps and borders; Brand Blue stays the interaction anchor. */

    --bg-primary: #090E18;   /* canvas */
    --bg-secondary: #111827;
    --bg-tertiary: #182235;
    --surface: #111827;
    --surface-raised: #182235;
    --surface-hover: #1E293B;
    --surface-active: #1E293B;
    --surface-border: #263449;

    --text-primary: #F8FAFC;   /* 18.45:1 (AAA) */
    --text-secondary: #CBD5E1; /* 13.00:1 (AAA) */
    --text-tertiary: #94A3B8;  /* 7.53:1 (AAA) */
    --text-muted: #64748B;
    --text-disabled: #64748B;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #090E18;
    --link-visited: #A78BFA;   /* violet-400 — 7.09:1 (AAA) */

    --primary: #60A5FA;        /* links/inline accents — 7.59:1 (AAA) */
    --primary-hover: #93C5FD;
    --primary-active: #3B82F6;
    --primary-dark: #1E40AF;
    --primary-light: #93C5FD;
    --primary-soft: #172554;

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

    /* Filled primary button stays Brand Blue with white text in both
       modes so the brand anchor never shifts. White on #2563EB is 5.17:1. */
    --button-primary: #2563EB;
    --button-primary-hover: #1D4ED8;
    --button-primary-active: #1E40AF;

    --thread: #60A5FA;
    --thread-hover: #93C5FD;

    --product-accent: var(--primary);
    --product-accent-hover: var(--primary-hover);
    --product-accent-foreground: var(--text-on-bright-accent); /* canvas ink on #60A5FA */

    --accent-violet: #A78BFA;      /* 7.09:1 (AAA) */
    --accent-violet-hover: #C4B5FD;
    --accent-teal: #2DD4BF;
    --accent-teal-hover: #5EEAD4;

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(96, 165, 250, 0.18);
    --accent-gold: #F59E0B;      /* 8.99:1 (AAA) */
    --accent-gold-fill: #F59E0B;
    --accent-gold-hover: #FCD34D;
    --accent-pink: var(--accent-violet);
    --accent-pink-hover: var(--accent-violet-hover);

    --success: #22C55E;        /* 8.47:1 (AAA) */
    --success-fill: #22C55E;
    --success-soft: #052E16;
    --success-strong: #86EFAC;
    --warning: #F59E0B;        /* 8.99:1 (AAA) */
    --warning-fill: #F59E0B;
    --warning-soft: #451A03;
    --warning-strong: #FCD34D;
    --error: #F87171;          /* 6.98:1 (AA) */
    --error-fill: #F87171;
    --error-soft: #450A0A;
    --error-strong: #FCA5A5;
    --info: #60A5FA;           /* 7.59:1 (AAA) */
    --info-fill: #60A5FA;
    --info-soft: #172554;
    --info-strong: #BFDBFE;

    --border: #263449;
    --border-light: #334155;
    --border-input: #334155;   /* handoff Border Strong; focus border switches to Brand Blue */
    --divider: #263449;
    --disabled-bg: #182235;
    --focus-ring: #60A5FA;
    --focus-ring-inner: #090E18;

    --overlay-soft: rgba(17, 24, 39, 0.82);
    --overlay-muted: rgba(24, 34, 53, 0.88);
    --overlay-strong: rgba(9, 14, 24, 0.92);
    --overlay-backdrop: rgba(2, 6, 23, 0.72);   /* modal backdrop per handoff */
    --overlay-accent: rgba(96, 165, 250, 0.12);
    --grid-line: rgba(148, 163, 184, 0.12);
    --hero-glow: rgba(96, 165, 250, 0.12);
    --spotlight: rgba(96, 165, 250, 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: #000000;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.36);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.40);
    --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.44);
    --shadow-primary: 0 10px 28px -14px rgba(37, 99, 235, 0.30);

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

    --gradient-primary: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
    --gradient-cyan: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%);
    --gradient-signature: linear-gradient(135deg, #1E40AF 0%, #2563EB 60%, #3B82F6 130%);
    --gradient-surface: linear-gradient(145deg, rgba(17, 24, 39, 0.94) 0%, rgba(9, 14, 24, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(38, 52, 73, 0.38) 0%, rgba(9, 14, 24, 0.20) 100%);
    --gradient-text: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
    --gradient-section-title: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
    --gradient-display-heading: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
}

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

        --bg-primary: #090E18;
        --bg-secondary: #111827;
        --bg-tertiary: #182235;
        --surface: #111827;
        --surface-raised: #182235;
        --surface-hover: #1E293B;
        --surface-active: #1E293B;
        --surface-border: #263449;

        --text-primary: #F8FAFC;
        --text-secondary: #CBD5E1;
        --text-tertiary: #94A3B8;
        --text-muted: #64748B;
        --text-disabled: #64748B;
        --text-on-accent: #FFFFFF;
        --text-on-bright-accent: #090E18;
        --link-visited: #A78BFA;

        --primary: #60A5FA;
        --primary-hover: #93C5FD;
        --primary-active: #3B82F6;
        --primary-dark: #1E40AF;
        --primary-light: #93C5FD;
        --primary-soft: #172554;

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

        --button-primary: #2563EB;
        --button-primary-hover: #1D4ED8;
        --button-primary-active: #1E40AF;

        --thread: #60A5FA;
        --thread-hover: #93C5FD;

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

        --accent-violet: #A78BFA;
        --accent-violet-hover: #C4B5FD;
        --accent-teal: #2DD4BF;
        --accent-teal-hover: #5EEAD4;

        --accent-cyan: var(--primary);
        --accent-cyan-hover: var(--primary-hover);
        --accent-cyan-glow: rgba(96, 165, 250, 0.18);
        --accent-gold: #F59E0B;
        --accent-gold-fill: #F59E0B;
        --accent-gold-hover: #FCD34D;
        --accent-pink: var(--accent-violet);
        --accent-pink-hover: var(--accent-violet-hover);

        --success: #22C55E;
        --success-fill: #22C55E;
        --success-soft: #052E16;
        --success-strong: #86EFAC;
        --warning: #F59E0B;
        --warning-fill: #F59E0B;
        --warning-soft: #451A03;
        --warning-strong: #FCD34D;
        --error: #F87171;
        --error-fill: #F87171;
        --error-soft: #450A0A;
        --error-strong: #FCA5A5;
        --info: #60A5FA;
        --info-fill: #60A5FA;
        --info-soft: #172554;
        --info-strong: #BFDBFE;

        --border: #263449;
        --border-light: #334155;
        --border-input: #334155;
        --divider: #263449;
        --disabled-bg: #182235;
        --focus-ring: #60A5FA;
        --focus-ring-inner: #090E18;

        --overlay-soft: rgba(17, 24, 39, 0.82);
        --overlay-muted: rgba(24, 34, 53, 0.88);
        --overlay-strong: rgba(2, 6, 23, 0.72);
        --overlay-accent: rgba(96, 165, 250, 0.12);
        --grid-line: rgba(148, 163, 184, 0.12);
        --hero-glow: rgba(96, 165, 250, 0.12);
        --spotlight: rgba(96, 165, 250, 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: #000000;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
        --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.30);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.36);
        --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.40);
        --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.44);
        --shadow-primary: 0 10px 28px -14px rgba(37, 99, 235, 0.30);

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

        --gradient-primary: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
        --gradient-cyan: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%);
        --gradient-signature: linear-gradient(135deg, #1E40AF 0%, #2563EB 60%, #3B82F6 130%);
        --gradient-surface: linear-gradient(145deg, rgba(17, 24, 39, 0.94) 0%, rgba(9, 14, 24, 0.98) 100%);
        --gradient-glass: linear-gradient(180deg, rgba(38, 52, 73, 0.38) 0%, rgba(9, 14, 24, 0.20) 100%);
        --gradient-text: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
        --gradient-section-title: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
        --gradient-display-heading: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
    }
}