/**
 * Central color and theme tokens for Rebranding pages (index, index1–3).
 * All literal color values live here; page CSS and shared components use var(--*).
 */

:root {
    /* Core CI Neutrals */
    --seldon-dark: #060912;
    --seldon-light: #F4F3EF;
    --seldon-gray-dark: #404040;
    --seldon-gray-light: #AAAAAA;

    /* Primitives */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Light Mode Applied */
    --bg-color: var(--seldon-light);
    --text-main: var(--seldon-dark);
    --text-muted: var(--seldon-gray-dark);

    /* Glassmorphic UI Cards */
    --card-bg: rgba(244, 243, 239, 0.76);
    --card-border: rgba(6, 9, 18, 0.1);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);

    /* True 3-Path Logo Variables (Alternating Solid Colors) */
    --logo-main: var(--seldon-dark);
    --logo-sub: var(--seldon-gray-light);

    /* WebGL Shader — CI-aligned (see docs/seldon-trevize-ci-en.html) */
    --shader-bg: #f4f3ef;
    --shader-fg: #dcd8cb;

    --accent: #4455ff;
    --accent-soft: rgba(68, 85, 255, 0.09);
    --accent-border: rgba(68, 85, 255, 0.24);
    --accent-strong: #2233cc;
    --accent-text: #ffffff;
    --brand-blue: #4455ff;

    /*
     * Body hyperlinks — Seldon Trevize CI (accent blue + muted “Trevize”-like underline contrast).
     * Excludes .logo-home-link and button-styled anchors (.btn-text, .btn-solid, .btn-ghost) in page CSS.
     */
    --link-color: color-mix(in srgb, var(--accent) 90%, var(--text-main) 10%);
    --link-color-hover: var(--accent-strong);
    --link-color-visited: color-mix(in srgb, var(--accent) 62%, var(--text-muted) 38%);
    --link-underline: color-mix(in srgb, var(--accent) 38%, transparent);
    --link-underline-hover: color-mix(in srgb, var(--accent) 62%, transparent);

    /* Diagrams: TwinX + shared SVG — chip fills are near-opaque so labels stay legible over orbit lines */
    --diagram-chip-fill: rgba(244, 243, 239, 0.96);
    --diagram-chip-accent-fill: color-mix(in srgb, var(--bg-color) 76%, var(--accent) 24%);
    --diagram-chip-hover-fill: color-mix(in srgb, var(--diagram-chip-fill) 66%, var(--accent) 34%);
    --diagram-twinx-core-fill: #d8dad3;
    --diagram-twinx-core-stroke: rgba(6, 9, 18, 0.16);
    --diagram-core-text: var(--text-main);
    --field-core-fill: rgba(244, 243, 239, 0.94);
    --diagram-tooltip-bg: var(--diagram-chip-fill);
    --diagram-tooltip-border: var(--accent-border);
    --diagram-tooltip-shadow: var(--card-shadow);

    --meter-ok: #1b5e20;
    --meter-warn: #e65100;
    --meter-bad: #b71c1c;
    /* Warning chips: TwinX drawer “Conflicting roles”, thesis “Isolated issuance” */
    --diagram-warning-chip-fill: color-mix(in srgb, var(--meter-bad) 16%, var(--diagram-chip-fill));
    --diagram-warning-chip-stroke: color-mix(in srgb, var(--meter-bad) 58%, transparent);
    --diagram-warning-text: var(--meter-bad);
    --nav-height: clamp(74px, 8vw, 100px);
    --nav-pad-x: clamp(18px, 5vw, 72px);
    --nav-icon-size: clamp(40px, 3.4vw, 46px);
    --ui-scale: 1;
    --diagram-scale: 1;

    /* Cursor (mix-blend difference — must stay pure white) */
    --cursor-difference-color: var(--color-white);

    /* Controls */
    --control-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

    /* Media / embed surfaces */
    --media-frame-bg: rgba(6, 9, 18, 0.16);
    --media-frame-bg-dark-theme: rgba(244, 243, 239, 0.05);
    --media-frame-bg-mono: rgba(127, 127, 127, 0.08);
    --video-letterbox-bg: var(--color-black);
    --media-audio-shell-radial: rgba(68, 85, 255, 0.12);
    --media-audio-shell-fade: rgba(255, 255, 255, 0.02);
    --media-viewer-audio-radial: rgba(68, 85, 255, 0.14);
    --media-viewer-audio-fade: rgba(255, 255, 255, 0.025);
    --embed-document-bg: rgba(255, 255, 255, 0.98);
    --media-viewer-backdrop-bg: rgba(6, 9, 18, 0.08);
    --media-viewer-frame-bg: rgba(6, 9, 18, 0.18);
    --media-viewer-frame-bg-dark-theme: rgba(244, 243, 239, 0.05);
    --media-viewer-frame-bg-mono: rgba(127, 127, 127, 0.08);

    /* Lab */
    --lab-camera-readout-bg: rgba(0, 0, 0, 0.03);
    --lab-camera-readout-bg-mono: rgba(127, 127, 127, 0.06);

    /* Nav */
    --nav-menu-backdrop-bg: rgba(6, 9, 18, 0.18);
    --nav-mobile-panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);

    /* Primary button glow */
    --btn-solid-glow-shadow: 0 10px 26px rgba(68, 85, 255, 0.18);

    /* Active rows / matrix (architecture, field switcher, trust) */
    --module-row-active-bg: rgba(68, 85, 255, 0.08);
    --module-row-active-inset-shadow: inset 0 0 0 1px rgba(68, 85, 255, 0.26);
    --field-switcher-active-bg: rgba(68, 85, 255, 0.12);
    --field-switcher-active-border: rgba(68, 85, 255, 0.4);
    --field-switcher-active-inset: inset 0 0 0 1px rgba(68, 85, 255, 0.14);
    --trust-item-active-bg: rgba(68, 85, 255, 0.08);
    --trust-item-active-inset: inset 0 0 0 1px rgba(68, 85, 255, 0.26);

    /* Diagram drop shadows */
    --diagram-core-drop-shadow: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.14));
    --field-map-diagram-core-shadow: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.24));

    /* Insight drawer */
    --insight-backdrop-bg: rgba(6, 9, 18, 0.14);

    /* Info indicator */
    --info-indicator-border: rgba(127, 127, 127, 0.18);
    --info-indicator-bg: rgba(127, 127, 127, 0.05);
    --info-indicator-hover-bg: rgba(127, 127, 127, 0.1);
    --info-indicator-hover-border: rgba(68, 85, 255, 0.35);

    /* Submit preview */
    --submit-preview-backdrop: rgba(4, 4, 6, 0.5);
    --submit-preview-muted-surface: rgba(127, 127, 127, 0.05);
    --submit-preview-muted-surface-dark: rgba(255, 255, 255, 0.04);

    /* Contact hybrid fields */
    --contact-input-surface: rgba(127, 127, 127, 0.06);
    --contact-input-surface-dark: rgba(255, 255, 255, 0.04);

    /* Scrollbar */
    --scrollbar-track: rgba(6, 9, 18, 0.06);
    --scrollbar-thumb: color-mix(in srgb, var(--brand-blue) 24%, rgba(6, 9, 18, 0.26));
    --scrollbar-thumb-hover: color-mix(in srgb, var(--brand-blue) 42%, rgba(6, 9, 18, 0.36));

    /* Native <select> chrome (brief / contact forms) */
    --brief-select-hover-border: rgba(127, 127, 127, 0.45);
    --brief-select-hover-border-mono-dark: rgba(255, 255, 255, 0.22);
    --brief-select-hover-border-mono-light: rgba(0, 0, 0, 0.22);
    --brief-select-option-checked-bg: rgba(127, 127, 127, 0.18);
    --brief-select-option-checked-bg-dark: rgba(255, 255, 255, 0.12);

    /*
     * Section & glass-card layout (global, viewport-aware).
     * Top padding stays small vs available height; bottom separates stacked sections.
     * Scroll margin tracks fixed nav + safe-area for in-page anchors.
     */
    --section-pad-top: clamp(0.5rem, 2.8dvh, 2rem);
    --section-pad-bottom: clamp(2rem, 6dvh, 4.5rem);
    --section-scroll-margin: max(4.5rem, calc(env(safe-area-inset-top, 0px) + var(--nav-height) + 0.25rem));
    --hero-min-height: min(100dvh, 100vh);
    --hero-padding-top: max(4.75rem, calc(env(safe-area-inset-top, 0px) + var(--nav-height) + 0.5rem));
    --glass-card-padding: clamp(1.5rem, 3.2vw, 3.25rem) clamp(1.25rem, 4vw, 2rem);
    --glass-card-radius: 24px;
}

/* Narrow screens: keep cards close under the nav; still scale with dynamic viewport height */
@media (max-width: 900px) {
    :root {
        --section-pad-top: clamp(0.35rem, 2dvh, 1rem);
        --section-pad-bottom: clamp(1.75rem, 4.5dvh, 3rem);
        --section-scroll-margin: max(5rem, calc(env(safe-area-inset-top, 0px) + 4.25rem));
        --hero-padding-top: max(4.25rem, calc(env(safe-area-inset-top, 0px) + 4.25rem));
        /* Tight insets so diagrams and dense sections use the viewport efficiently */
        --glass-card-padding: 0.625rem 0.75rem 0.875rem;
    }
}

[data-theme="dark"] {
    /* Dark Mode Applied */
    --bg-color: var(--seldon-dark);
    --text-main: var(--seldon-light);
    --text-muted: var(--seldon-gray-light);

    /* Glassmorphic UI Cards */
    --card-bg: rgba(6, 9, 18, 0.74);
    --card-border: rgba(244, 243, 239, 0.1);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);

    /* True 3-Path Logo Variables (Alternating Solid Colors) */
    --logo-main: var(--seldon-light);
    --logo-sub: var(--seldon-gray-dark);

    --shader-bg: #060912;
    --shader-fg: #151a28;

    --meter-ok: #66bb6a;
    --meter-warn: #ffb74d;
    --meter-bad: #ef5350;

    --diagram-twinx-core-fill: #141820;
    --diagram-twinx-core-stroke: rgba(244, 243, 239, 0.2);
    --diagram-chip-fill: rgba(6, 9, 18, 0.95);
    --diagram-chip-accent-fill: color-mix(in srgb, var(--bg-color) 74%, var(--accent) 26%);
    --diagram-chip-hover-fill: color-mix(in srgb, var(--diagram-chip-fill) 62%, var(--accent) 38%);
    --field-core-fill: rgba(6, 9, 18, 0.93);
    --scrollbar-track: rgba(244, 243, 239, 0.08);
    --scrollbar-thumb: color-mix(in srgb, var(--brand-blue) 32%, rgba(244, 243, 239, 0.22));
    --scrollbar-thumb-hover: color-mix(in srgb, var(--brand-blue) 48%, rgba(244, 243, 239, 0.34));

    --control-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    --nav-mobile-panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    --diagram-core-drop-shadow: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

/* Strict grayscale: nav + shared tokens + shader (--shader-*) read by WebGL */
html[data-monochrome="on"] {
    --bg-color: #ededed;
    --text-main: #101010;
    --text-muted: #5a5a5a;
    --card-bg: rgba(237, 237, 237, 0.86);
    --card-border: rgba(0, 0, 0, 0.14);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
    --logo-main: #101010;
    --logo-sub: #888888;
    --shader-bg: #e6e6e6;
    --shader-fg: #9e9e9e;
    --accent: #4a4a4a;
    --accent-soft: rgba(74, 74, 74, 0.1);
    --accent-border: rgba(74, 74, 74, 0.24);
    --accent-strong: #1f1f1f;
    --accent-text: #ffffff;
    --diagram-twinx-core-fill: #c8cac4;
    --diagram-twinx-core-stroke: rgba(0, 0, 0, 0.12);
    --diagram-chip-fill: rgba(237, 237, 237, 0.97);
    --diagram-chip-accent-fill: color-mix(in srgb, var(--bg-color) 80%, var(--accent) 20%);
    --diagram-chip-hover-fill: color-mix(in srgb, var(--diagram-chip-fill) 72%, var(--accent) 28%);
    --field-core-fill: rgba(237, 237, 237, 0.95);
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(74, 74, 74, 0.34);
    --scrollbar-thumb-hover: rgba(74, 74, 74, 0.5);

    --btn-solid-glow-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
    --media-audio-shell-radial: rgba(74, 74, 74, 0.12);
    --media-audio-shell-fade: rgba(255, 255, 255, 0.03);
    --media-viewer-audio-radial: rgba(74, 74, 74, 0.14);
    --media-viewer-audio-fade: rgba(255, 255, 255, 0.03);
    --module-row-active-bg: rgba(74, 74, 74, 0.08);
    --module-row-active-inset-shadow: inset 0 0 0 1px rgba(74, 74, 74, 0.26);
    --field-switcher-active-bg: rgba(74, 74, 74, 0.12);
    --field-switcher-active-border: rgba(74, 74, 74, 0.4);
    --field-switcher-active-inset: inset 0 0 0 1px rgba(74, 74, 74, 0.14);
    --trust-item-active-bg: rgba(74, 74, 74, 0.08);
    --trust-item-active-inset: inset 0 0 0 1px rgba(74, 74, 74, 0.26);
    --info-indicator-hover-border: rgba(74, 74, 74, 0.35);
}

html[data-monochrome="on"][data-theme="dark"] {
    --bg-color: #101010;
    --text-main: #ececec;
    --text-muted: #9a9a9a;
    --card-bg: rgba(16, 16, 16, 0.84);
    --card-border: rgba(255, 255, 255, 0.12);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    --logo-main: #ececec;
    --logo-sub: #707070;
    --shader-bg: #0c0c0c;
    --shader-fg: #3a3a3a;
    --accent: #d4d4d4;
    --accent-soft: rgba(212, 212, 212, 0.08);
    --accent-border: rgba(212, 212, 212, 0.22);
    --accent-strong: #f2f2f2;
    --accent-text: #101010;
    --diagram-twinx-core-fill: #1a1a1a;
    --diagram-twinx-core-stroke: rgba(255, 255, 255, 0.14);
    --diagram-chip-fill: rgba(16, 16, 16, 0.96);
    --diagram-chip-accent-fill: color-mix(in srgb, var(--bg-color) 80%, var(--accent) 20%);
    --diagram-chip-hover-fill: color-mix(in srgb, var(--diagram-chip-fill) 70%, var(--accent) 30%);
    --field-core-fill: rgba(16, 16, 16, 0.94);
    --scrollbar-track: rgba(255, 255, 255, 0.06);
    --scrollbar-thumb: rgba(212, 212, 212, 0.28);
    --scrollbar-thumb-hover: rgba(212, 212, 212, 0.42);

    --btn-solid-glow-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    --media-audio-shell-radial: rgba(212, 212, 212, 0.12);
    --media-audio-shell-fade: rgba(255, 255, 255, 0.04);
    --media-viewer-audio-radial: rgba(212, 212, 212, 0.14);
    --media-viewer-audio-fade: rgba(255, 255, 255, 0.05);
    --module-row-active-bg: rgba(212, 212, 212, 0.08);
    --module-row-active-inset-shadow: inset 0 0 0 1px rgba(212, 212, 212, 0.22);
    --field-switcher-active-bg: rgba(212, 212, 212, 0.12);
    --field-switcher-active-border: rgba(212, 212, 212, 0.38);
    --field-switcher-active-inset: inset 0 0 0 1px rgba(212, 212, 212, 0.16);
    --trust-item-active-bg: rgba(212, 212, 212, 0.08);
    --trust-item-active-inset: inset 0 0 0 1px rgba(212, 212, 212, 0.22);
    --info-indicator-hover-border: rgba(212, 212, 212, 0.35);
}