/* ========================================
   Arsis Brand Design Tokens
   ======================================== */

:root {
    /* Brand core */
    --brand-primary: #3654ff;
    --brand-primary-dark: #273dd4;
    --brand-primary-soft: rgba(54, 84, 255, 0.12);
    --brand-accent: #20d6bc;
    --brand-text: #1b254b;
    --brand-muted: #6f7799;
    --brand-bg: #f3f6ff;
    --brand-surface: #ffffff;
    --brand-border: rgba(27, 37, 75, 0.08);
    --brand-gradient: linear-gradient(135deg, #3654ff 0%, #6366f1 100%);

    /* Test / psychometrics */
    --test-primary: #4361ee;
    --test-primary-dark: #3f37c9;
    --test-success: #06d6a0;
    --test-warning: #f59e0b;
    --test-bg: #f4f6fb;
    --test-gradient: linear-gradient(135deg, #4361ee 0%, #6366f1 100%);

    /* Academy */
    --academy-primary: #005b96;
    --academy-accent: #0077be;
    --academy-bg: #f7fafc;
    --academy-gradient: linear-gradient(135deg, #005b96 0%, #0077be 100%);

    /* Consulting */
    --consult-primary: #14b8a6;
    --consult-accent: #2dd4bf;
    --consult-bg: #ecfdf5;
    --consult-gradient: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);

    /* HR / organization */
    --hr-primary: #6366f1;
    --hr-secondary: #8b5cf6;
    --hr-bg: #eff2f9;
    --hr-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

    /* Career / user growth */
    --career-primary: #10b981;
    --career-accent: #14b8a6;
    --career-bg: #f0fdf4;
    --career-gradient: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);

    /* Public template aliases */
    --primary: var(--brand-primary);
    --secondary: var(--brand-primary-dark);
    --accent: var(--brand-accent);
    --success: var(--test-success);
    --dark-bg: var(--brand-bg);
    --card-bg: var(--brand-surface);
    --text-main: var(--brand-text);
    --text-muted: var(--brand-muted);
    --glass-border: var(--brand-border);
    --gradient-main: var(--brand-gradient);
    --header-bg: rgba(255, 255, 255, 0.88);
    --header-bg-scrolled: rgba(255, 255, 255, 0.96);
    --mobile-nav-bg: rgba(255, 255, 255, 0.98);
    --cart-action-bg: rgba(27, 37, 75, 0.04);
    --footer-bg: #eef1f8;

    /* Hero surfaces (light default) */
    --hero-surface-bg: linear-gradient(145deg, #eef2ff 0%, #f8faff 100%);
    --hero-surface-glow-a: rgba(54, 84, 255, 0.12);
    --hero-surface-glow-b: rgba(32, 214, 188, 0.14);
    --hero-card-gradient: var(--brand-gradient);
    --hero-eyebrow: var(--brand-primary-dark);
    --landing-primary: var(--brand-primary);
    --landing-gradient: var(--brand-gradient);
    --landing-eyebrow: var(--brand-primary-dark);
    --landing-surface-soft: rgba(54, 84, 255, 0.06);
    --landing-surface-border: rgba(54, 84, 255, 0.14);

    /* Shared surfaces for cards/boxes/inputs across public pages */
    --surface-box-bg: var(--brand-surface);
    --surface-input-bg: rgba(27, 37, 75, 0.04);
    --surface-input-focus-bg: var(--brand-surface);
    --surface-chip-accent: var(--landing-primary);
    --surface-highlight-text: #b45309;
    --surface-star-muted: rgba(27, 37, 75, 0.25);

    /* Site shell (site.css) */
    --site-primary: var(--brand-primary);
    --site-primary-dark: var(--brand-primary-dark);
    --site-primary-soft: var(--brand-primary-soft);
    --site-accent: var(--brand-accent);
    --site-text: var(--brand-text);
    --site-muted: var(--brand-muted);
    --site-border: var(--brand-border);
    --site-surface: var(--brand-surface);
    --site-background: var(--brand-bg);
}

html[data-theme="dark"] {
    --brand-primary: #5b7aff;
    --brand-primary-dark: #4361ee;
    --brand-primary-soft: rgba(91, 122, 255, 0.18);
    --brand-accent: #2ee8cc;
    --brand-text: #e8ecf5;
    --brand-muted: #94a3b8;
    --brand-bg: #0f1524;
    --brand-surface: #1a2236;
    --brand-border: rgba(255, 255, 255, 0.08);
    --brand-gradient: linear-gradient(135deg, #5b7aff 0%, #8b5cf6 100%);

    --primary: var(--brand-primary);
    --secondary: var(--brand-primary-dark);
    --accent: var(--brand-accent);
    --dark-bg: #0b0c15;
    --card-bg: rgba(255, 255, 255, 0.03);
    --text-main: #ffffff;
    --text-muted: #b8b8d4;
    --glass-border: rgba(255, 255, 255, 0.08);
    --gradient-main: var(--brand-gradient);
    --header-bg: rgba(11, 12, 21, 0.7);
    --header-bg-scrolled: rgba(11, 12, 21, 0.95);
    --mobile-nav-bg: rgba(11, 12, 21, 0.98);
    --cart-action-bg: rgba(255, 255, 255, 0.05);
    --footer-bg: #050508;

    --hero-surface-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(11, 12, 21, 0.92) 100%);
    --hero-surface-glow-a: rgba(76, 201, 240, 0.18);
    --hero-surface-glow-b: rgba(67, 97, 238, 0.24);
    --hero-card-gradient: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
    --hero-eyebrow: #7dd3fc;
    --landing-surface-soft: rgba(255, 255, 255, 0.03);
    --landing-surface-border: rgba(255, 255, 255, 0.08);

    --surface-box-bg: rgba(255, 255, 255, 0.03);
    --surface-input-bg: rgba(0, 0, 0, 0.2);
    --surface-input-focus-bg: rgba(255, 255, 255, 0.06);
    --surface-chip-accent: #a5f3fc;
    --surface-highlight-text: #fde68a;
    --surface-star-muted: rgba(255, 255, 255, 0.25);

    --site-background: var(--brand-bg);
    --site-surface: var(--brand-surface);
    color-scheme: dark;
}

/* Section-specific landing themes */
.spa-landing,
.specialized-skills-academy {
    --landing-primary: var(--academy-primary);
    --landing-gradient: var(--academy-gradient);
    --landing-eyebrow: var(--academy-accent);
    --landing-surface-soft: rgba(0, 91, 150, 0.08);
    --landing-surface-border: rgba(0, 91, 150, 0.18);
}

.counsel-landing {
    --landing-primary: var(--consult-primary);
    --landing-gradient: var(--consult-gradient);
    --landing-eyebrow: var(--consult-primary);
    --landing-surface-soft: rgba(20, 184, 166, 0.08);
    --landing-surface-border: rgba(20, 184, 166, 0.18);
}

.hr-landing {
    --landing-primary: var(--hr-primary);
    --landing-gradient: var(--hr-gradient);
    --landing-eyebrow: var(--hr-primary);
    --landing-surface-soft: rgba(99, 102, 241, 0.08);
    --landing-surface-border: rgba(99, 102, 241, 0.18);
}

#smart-job-placement-landing,
.career-landing {
    --landing-primary: var(--career-primary);
    --landing-gradient: var(--career-gradient);
    --landing-eyebrow: var(--career-primary);
    --landing-surface-soft: rgba(16, 185, 129, 0.08);
    --landing-surface-border: rgba(16, 185, 129, 0.18);
}

.tests-page-container,
.tests-public-page,
.detail-page {
    --primary: var(--test-primary);
    --secondary: var(--test-primary-dark);
    --accent: var(--test-success);
}