/* ===========================================================================
 *  TOKENS  —  EY defaults (also the no-theme default)
 * =========================================================================== */
:root {
    /* Typography: families  */
    --font-heading: 'Lexend', 'Heebo', sans-serif;
    --font-body: 'Heebo', sans-serif;
    --font-mono: 'Digital-7', 'DM Mono', 'Courier New', monospace;
    --font-family: var(--font-body);

    /* ---- Typography: type scale (fluid, shared by every theme) ---- */
    --fs-page-title: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
    --fs-section-title: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
    --fs-card-title: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
    --fs-body: clamp(0.92rem, 0.88rem + 0.3vw, 1.05rem);
    --fs-body-sm: clamp(0.82rem, 0.8rem + 0.2vw, 0.92rem);
    --fs-label: clamp(0.8rem, 0.78rem + 0.15vw, 0.9rem);
    --fs-helper: clamp(0.75rem, 0.73rem + 0.12vw, 0.85rem);

    /* ---- Typography: weights ---- */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---- Typography: line heights ---- */
    --lh-tight: 1.4;
    --lh-normal: 1.55;
    --lh-relaxed: 1.7;

    /* ---- Radius ---- */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.24);

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --card-padding: clamp(1.25rem, 3vw, 2rem);
    --section-gap: clamp(1.25rem, 3vw, 2.25rem);

    /* =======================================================================
     *  COLOR TOKENS  —  each reads its --ds-* override slot first, then the
     *  EY default. Theme blocks below override only the default.
     * ===================================================================== */

    /* Page background (the dark EY gradient).
       --org-* fallbacks keep legacy orgs (old theme_config, no data-theme) tinted. */
    --color-page-bg: var(--ds-page-bg, var(--org-primary, #1f1f2b));
    --page-bg-image: var(--ds-page-bg-image, linear-gradient(115deg,
                var(--org-primary, #1f1f2b) 0%,
                var(--org-primary, #262630) 45%,
                var(--org-primary, #33331e) 72%,
                var(--org-secondary, #ffe600) 155%));

    /* Surfaces / cards */
    --color-surface: var(--ds-card-bg, rgba(255, 255, 255, 0.035));
    --color-surface-alt: var(--ds-card-bg-alt, rgba(255, 255, 255, 0.055));
    --color-card-bg: var(--color-surface-alt);

    /* Text */
    --color-heading: var(--ds-heading, #ffffff);
    --color-text: var(--ds-body, rgba(255, 255, 255, 0.85));
    --color-text-muted: var(--ds-body-muted, rgba(255, 255, 255, 0.6));
    --color-on-dark: var(--ds-on-dark, #ffffff);
    --color-on-dark-muted: var(--ds-on-dark-muted, rgba(255, 255, 255, 0.78));

    /* Accent (active states / progress / highlights / focus) */
    --color-accent: var(--ds-accent, var(--org-secondary, #ffe600));
    --color-accent-contrast: var(--ds-accent-contrast, #151515);
    --color-highlight: var(--ds-highlight, rgba(255, 230, 0, 0.15));
    --color-focus: var(--ds-focus, var(--color-accent));

    /* Links */
    --color-link: var(--ds-link, #1e3a5f);
    --color-link-hover: var(--ds-link-hover, #0f2740);

    /* Borders */
    --color-border: var(--ds-border, rgba(255, 255, 255, 0.12));
    --color-border-strong: var(--ds-border-strong, rgba(255, 255, 255, 0.22));
    --color-border-on-dark: var(--ds-border-on-dark, rgba(255, 255, 255, 0.2));

    /* Buttons (a gradient is a valid value for these slots) */
    --color-btn-bg: var(--ds-btn-bg, linear-gradient(180deg, #fff066 0%, #ffe600 100%));
    --color-btn-text: var(--ds-btn-text, #151515);
    --color-btn-hover-bg: var(--ds-btn-hover-bg, linear-gradient(180deg, #ffe600 0%, #f5c400 100%));
    --color-btn-hover-text: var(--ds-btn-hover-text, var(--color-btn-text));

    /* Inputs */
    --color-input-bg: var(--ds-input-bg, #ffffff);
    --color-input-text: var(--ds-input-text, #1f2937);
    --color-input-border: var(--ds-input-border, #d1d5db);
    --color-input-placeholder: var(--ds-input-placeholder, #94a3b8);

    /* Immersive "stage" surfaces — the full-screen exercise pages (roleplay,
       interview, case study, group discussion). These stay a dark studio in
       every theme (white-glass panels need a dark backdrop), tinted by the
       theme's primary. Distinct from the card-based pages (dashboard, etc.). */
    --color-stage-image: var(--page-bg-image);
    --color-canvas-text: var(--ds-canvas-text, #ffffff);
    --color-canvas-text-muted: var(--ds-canvas-text-muted, rgba(255, 255, 255, 0.78));
    --color-canvas-deep: var(--ds-canvas-deep, #0f172a);
    --color-canvas-deep-2: var(--ds-canvas-deep-2, #16213b);
    --color-user-bubble: var(--ds-user-bubble, linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(37, 99, 235, 0.18)));

    /* =======================================================================
     *  LEGACY BRIDGE  —  pre-existing vars consumed across the old CSS.
     *  Kept so any not-yet-migrated `var(--org-*)` reference follows the theme.
     *  (auth.js also still sets --org-* from legacy theme_config fields.)
     * ===================================================================== */
    --primary-blue: var(--org-primary, #1f1f2b);
    --primary-blue-hover: var(--org-primary, #2b2b38);
    --gradient-bg: var(--page-bg-image);
    --teal-primary: var(--color-accent);
    --teal-hover: var(--color-link-hover);
    --primary-dark: var(--org-primary, #1f1f2b);
    --primary-mid: var(--org-primary, #2b2b38);
    --primary-light: var(--org-secondary, #ffe600c6);
    --gradient-primary: var(--page-bg-image);
    --grid-line: rgba(255, 255, 255, 0.2);
    --grid-size: 38px;
}

:root[data-theme="tvs"] body:not(.system-check-page) {
    background-image:
        radial-gradient(ellipse 115% 115% at 50% 32%, transparent 42%, #080b16 92%),
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        var(--page-bg-image);
    background-size:
        cover,
        var(--grid-size) var(--grid-size),
        var(--grid-size) var(--grid-size),
        cover;
    background-position: center, center top, center top, center;
    background-attachment: fixed, fixed, fixed, fixed;
    background-repeat: no-repeat, repeat, repeat, no-repeat;
}

/* ===========================================================================
 *  THEME: EY  (explicit; identical to the base defaults above)
 * =========================================================================== */
:root[data-theme="ey"] {
    --org-primary: #1f1f2b;
    --org-secondary: #ffe600;
    --org-accent: #ffe600;
    --org-text: #ffffff;
}

/* ===========================================================================
 *  THEME: TVS  (TVS Motor — deep navy + signature red, light surfaces)
 * =========================================================================== */
:root[data-theme="tvs"] {
    --color-page-bg: var(--ds-page-bg, #080b16);
    --page-bg-image: var(--ds-page-bg-image, linear-gradient(135deg,
                #080b16 0%,
                #1e263e 100%));

    --color-surface: var(--ds-card-bg, #111827);
    --color-surface-alt: var(--ds-card-bg-alt, #161e2e);

    --color-heading: var(--ds-heading, #ffffff);
    --color-text: var(--ds-body, #f7f9fc);
    --color-text-muted: var(--ds-body-muted, #9aa6bd);
    --color-on-dark: var(--ds-on-dark, #ffffff);
    --color-on-dark-muted: var(--ds-on-dark-muted, rgba(255, 255, 255, 0.78));

    --color-accent: var(--ds-accent, #4fd1c5);
    --color-accent-contrast: var(--ds-accent-contrast, #07121a);
    --color-highlight: var(--ds-highlight, rgba(79, 209, 197, 0.14));
    --color-focus: var(--ds-focus, #4fd1c5);

    --color-link: var(--ds-link, #5cc8ff);
    --color-link-hover: var(--ds-link-hover, #8ad6ff);

    --color-border: var(--ds-border, #1e2a3e);
    --color-border-strong: var(--ds-border-strong, rgba(255, 255, 255, 0.16));
    --color-border-on-dark: var(--ds-border-on-dark, rgba(255, 255, 255, 0.18));

    --color-btn-bg: var(--ds-btn-bg, #4fe3d8);
    --color-btn-text: var(--ds-btn-text, #07121a);
    --color-btn-hover-bg: var(--ds-btn-hover-bg, #37c7bc);
    --color-btn-hover-text: var(--ds-btn-hover-text, #07121a);

    --color-input-bg: var(--ds-input-bg, #ffffff);
    --color-input-text: var(--ds-input-text, #313c57);
    --color-input-border: var(--ds-input-border, #d2d8e4);
    --color-input-placeholder: var(--ds-input-placeholder, #9aa3b4);

    --color-canvas-deep: var(--ds-canvas-deep, #080b16);
    --color-canvas-deep-2: var(--ds-canvas-deep-2, #131c30);
    --color-user-bubble: var(--ds-user-bubble, linear-gradient(135deg, rgba(79, 209, 197, 0.24), rgba(79, 209, 197, 0.13)));

    --org-primary: #080b16;
    --org-secondary: #4fd1c5;
    --org-accent: #4fd1c5;
    --org-text: #ffffff;
}

:root[data-theme="tvs"] .assessment-header,
:root[data-theme="tvs"] .welcome-header {
    background: #0a0e1c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 10;
}

:root[data-theme="tvs"] .welcome-container {
    background: transparent;
}

/* ===========================================================================
 *  THEME: LIGHT  (soft neutral, high readability, modern minimal)
 * =========================================================================== */
:root[data-theme="light"] {
    --color-page-bg: var(--ds-page-bg, #d1cad8);
    --page-bg-image: var(--ds-page-bg-image, linear-gradient(135deg,
                #d1cad8 0%,
                #b5d9d1 100%));

    --color-surface: var(--ds-card-bg, #e8e8e8);
    --color-surface-alt: var(--ds-card-bg-alt, #eef0f4);

    --color-heading: var(--ds-heading, #313a4b);
    --color-text: var(--ds-body, #4b5563);
    --color-text-muted: var(--ds-body-muted, #8a93a3);
    --color-on-dark: var(--ds-on-dark, #313a4b);
    --color-on-dark-muted: var(--ds-on-dark-muted, #66707f);

    --color-accent: var(--ds-accent, #d96b6b);
    --color-accent-contrast: var(--ds-accent-contrast, #ffffff);
    --color-highlight: var(--ds-highlight, rgba(217, 107, 107, 0.12));
    --color-focus: var(--ds-focus, #d96b6b);

    --color-link: var(--ds-link, #393c3c);
    --color-link-hover: var(--ds-link-hover, #232525);

    --color-border: var(--ds-border, #d8dee8);
    --color-border-strong: var(--ds-border-strong, #c4ccd9);
    --color-border-on-dark: var(--ds-border-on-dark, #d8dee8);

    --color-btn-bg: var(--ds-btn-bg, #5b3d3d);
    --color-btn-text: var(--ds-btn-text, #ffffff);
    --color-btn-hover-bg: var(--ds-btn-hover-bg, #896c6c);
    --color-btn-hover-text: var(--ds-btn-hover-text, #ffffff);

    --color-input-bg: var(--ds-input-bg, #ffffff);
    --color-input-text: var(--ds-input-text, #313a4b);
    --color-input-border: var(--ds-input-border, #d5dae6);
    --color-input-placeholder: var(--ds-input-placeholder, #9aa3b2);

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.12);


    --org-primary: #d96b6b;
    --org-secondary: #d96b6b;
    --org-accent: #d96b6b;
    --org-text: #313a4b;
}

/* ===========================================================================
 *  THEME: CUSTOM  (neutral base — meant to be driven entirely by --ds-* )
 * =========================================================================== */
:root[data-theme="custom"] {
    --color-page-bg: var(--ds-page-bg, #242a36);
    --page-bg-image: var(--ds-page-bg-image, linear-gradient(135deg, #2b3340 0%, #222834 100%));

    --color-surface: var(--ds-card-bg, rgba(255, 255, 255, 0.035));
    --color-surface-alt: var(--ds-card-bg-alt, rgba(255, 255, 255, 0.055));

    --color-heading: var(--ds-heading, #ffffff);
    --color-text: var(--ds-body, rgba(255, 255, 255, 0.85));
    --color-text-muted: var(--ds-body-muted, rgba(255, 255, 255, 0.6));
    --color-on-dark: var(--ds-on-dark, #ffffff);
    --color-on-dark-muted: var(--ds-on-dark-muted, rgba(255, 255, 255, 0.78));

    --color-accent: var(--ds-accent, #6f86ad);
    --color-accent-contrast: var(--ds-accent-contrast, #ffffff);
    --color-highlight: var(--ds-highlight, rgba(111, 134, 173, 0.14));
    --color-focus: var(--ds-focus, #6f86ad);

    --color-link: var(--ds-link, #647ba2);
    --color-link-hover: var(--ds-link-hover, #506b8c);

    --color-border: var(--ds-border, rgba(255, 255, 255, 0.12));
    --color-border-strong: var(--ds-border-strong, rgba(255, 255, 255, 0.22));
    --color-border-on-dark: var(--ds-border-on-dark, rgba(255, 255, 255, 0.18));

    --color-btn-bg: var(--ds-btn-bg, linear-gradient(180deg, #5e7299 0%, #4f6388 100%));
    --color-btn-text: var(--ds-btn-text, #ffffff);
    --color-btn-hover-bg: var(--ds-btn-hover-bg, linear-gradient(180deg, #4f6388 0%, #42546f 100%));
    --color-btn-hover-text: var(--ds-btn-hover-text, #ffffff);

    --color-input-bg: var(--ds-input-bg, #ffffff);
    --color-input-text: var(--ds-input-text, #313a4b);
    --color-input-border: var(--ds-input-border, #d2d8e2);
    --color-input-placeholder: var(--ds-input-placeholder, #97a1b3);

    --color-canvas-deep: var(--ds-canvas-deep, #1b212c);
    --color-canvas-deep-2: var(--ds-canvas-deep-2, #262e3c);
    --color-user-bubble: var(--ds-user-bubble, linear-gradient(135deg, rgba(111, 134, 173, 0.28), rgba(111, 134, 173, 0.15)));

    --org-primary: #2b3340;
    --org-secondary: #6f86ad;
    --org-accent: #6f86ad;
    --org-text: #ffffff;
}

:root[data-theme="light"],
:root[data-stage-theme="light"] {
    --color-stage-image: var(--page-bg-image);
    --color-canvas-text: var(--ds-canvas-text, #313a4b);
    --color-canvas-text-muted: var(--ds-canvas-text-muted, #5b6675);
    --color-on-dark: var(--ds-on-dark, #313a4b);
    --color-on-dark-muted: var(--ds-on-dark-muted, #5b6675);
    --color-border-on-dark: var(--ds-border-on-dark, rgba(49, 58, 75, 0.18));
    --color-user-bubble: var(--ds-user-bubble, linear-gradient(135deg, rgba(217, 107, 107, 0.18), rgba(217, 107, 107, 0.10)));
}

/* ===========================================================================
 *  SHARED COMPONENT BASE  —  consumed by participant pages
 * =========================================================================== */

/* ── Persistent Need Help button in header ──
 * Intentionally NOT themed: the header utility buttons (Need Help, System
 * Navigation, Logout) keep their fixed EY styling across every theme. */
.header-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.header-help-btn:hover {
    background: rgba(255, 230, 0, 0.15);
    border-color: rgba(255, 230, 0, 0.3);
    color: #ffe600;
}

/* ── Primary action buttons (theme-driven) ──
 * Every participant CTA routes through these tokens so a theme/override updates
 * all buttons at once. Sizes/padding are intentionally left to each page. */
.primary-action-btn,
.lets-go-btn,
.proceed-btn,
.start-btn,
.start-btn-blue,
.begin-btn-blue,
.submit-btn,
.submit-btn-blue,
.start-button,
.submit-feedback-btn,
.btn-proceed,
.complete-next-btn,
.btn.btn-primary,
.btn.btn-blue {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    border: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.primary-action-btn:hover:not(:disabled),
.lets-go-btn:hover:not(:disabled),
.proceed-btn:hover:not(:disabled),
.start-btn:hover:not(:disabled),
.start-btn-blue:hover:not(:disabled),
.begin-btn-blue:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.submit-btn-blue:hover:not(:disabled),
.start-button:hover:not(:disabled),
.submit-feedback-btn:hover:not(:disabled),
.btn-proceed:hover:not(:disabled),
.complete-next-btn:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled),
.btn.btn-blue:hover:not(:disabled) {
    background: var(--color-btn-hover-bg);
    color: var(--color-btn-hover-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-proceed:active,
.primary-action-btn:active,
.proceed-btn:active {
    transform: translateY(0);
}

/* ── Participant Header Utility Buttons: Light Theme Auto-adaptation ── */
html[data-theme="light"] .header-help-btn {
    background: rgba(49, 58, 75, 0.08) !important;
    border-color: rgba(49, 58, 75, 0.2) !important;
    color: #313a4b !important;
}

html[data-theme="light"] .header-help-btn:hover {
    background: rgba(49, 58, 75, 0.15) !important;
    border-color: rgba(49, 58, 75, 0.35) !important;
    color: #1f2937 !important;
}

html[data-theme="light"] .system-nav-btn {
    background: rgba(49, 58, 75, 0.06) !important;
    border-color: rgba(217, 119, 6, 0.55) !important;
    color: #b45309 !important;
}

html[data-theme="light"] .system-nav-btn:hover {
    background: rgba(217, 119, 6, 0.12) !important;
}

html[data-theme="light"] .logout-btn-icon {
    background: rgba(49, 58, 75, 0.06) !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
}

html[data-theme="light"] .logout-btn-icon:hover {
    background: rgba(217, 119, 6, 0.12) !important;
    border-color: rgba(217, 119, 6, 0.65) !important;
}

html[data-theme="light"] .logout-btn-icon .logout-icon {
    filter: brightness(0.2) !important;
}
html[data-theme="light"] .brand-separator {
    background: rgba(49, 58, 75, 0.25) !important;
}


.primary-action-btn:disabled,
.lets-go-btn:disabled,
.proceed-btn:disabled,
.start-btn:disabled,
.submit-btn:disabled,
.start-button:disabled,
.submit-feedback-btn:disabled,
.btn.btn-primary:disabled,
.btn.btn-blue:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}