/**
 * EduPath-AI shared design tokens — matches landing (index.php).
 * Light default; dark via html[data-theme="dark"].
 */
:root {
    --p: #285A71;
    --pk: #1a4456;
    --pd: #0d2d3d;
    --a: #FCE4C0;
    --ad: #f5c98a;
    --g: #CFDA5A;
    --gk: #b8c44a;
    --ink: #14232c;
    --muted: #5a6b74;
    --bg: #f4f7f8;
    --bg-soft: #eef3f5;
    --surface: #ffffff;
    --surface-2: #f8fafb;
    --border: rgba(40, 90, 113, 0.12);
    --border-strong: rgba(40, 90, 113, 0.22);
    --shadow: 0 4px 24px rgba(26, 56, 68, 0.08);
    --shadow-lg: 0 16px 48px rgba(26, 56, 68, 0.14);
    --sidebar-bg: #0d2d3d;
    --sidebar-bg-2: #0a2430;
    --topnav-bg: rgba(255, 255, 255, 0.94);
    --text-on-dark: #ffffff;
    --text-on-lime: #1a4456;
    --focus-ring: rgba(40, 90, 113, 0.28);
    --danger: #dc3545;
    --success: #198754;
    --warning: #cc9a06;

    /* App shell aliases (legacy header names) */
    --primary: var(--p);
    --primary-dk: var(--pk);
    --accent: var(--a);
    --accent-dk: var(--ad);
    --lime: var(--g);
    --lime-dk: var(--gk);

    /* Page-module bridges */
    --dash-teal: var(--p);
    --dash-teal-dark: var(--pk);
    --dash-muted: var(--muted);
    --dash-border: var(--border);
    --dash-radius: 18px;
    --dash-shadow: var(--shadow);
    --pred-teal: var(--p);
    --pred-teal-dark: var(--pk);
    --sp-teal: var(--p);
    --sp-teal-dark: var(--pk);
    --ia-teal: var(--p);
    --ia-teal-dark: var(--pk);

    --font-display: 'Bricolage Grotesque', Georgia, serif;
    --font-body: 'Figtree', system-ui, sans-serif;
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 72px;
    --transition: 0.3s ease;
    --radius: 16px;
    --radius-sm: 10px;
    color-scheme: light;
}

html[data-theme="dark"] {
    --p: #3d8aad;
    --pk: #2a6d8a;
    --pd: #071820;
    --a: #FCE4C0;
    --ad: #f5c98a;
    --g: #CFDA5A;
    --gk: #d4e06a;
    --ink: #e8eef1;
    --muted: #9aadb8;
    --bg: #0a1620;
    --bg-soft: #0d1c28;
    --surface: #122632;
    --surface-2: #1a3340;
    --border: rgba(207, 218, 90, 0.12);
    --border-strong: rgba(207, 218, 90, 0.22);
    --shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.45);
    --sidebar-bg: #071820;
    --sidebar-bg-2: #050f16;
    --topnav-bg: rgba(18, 38, 50, 0.94);
    --text-on-dark: #ffffff;
    --text-on-lime: #0d2d3d;
    --focus-ring: rgba(207, 218, 90, 0.28);
    --danger: #f07178;
    --success: #3dd68c;
    --warning: #e6b422;
    color-scheme: dark;
}

/* Theme toggle control */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-radius: 12px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition),
        color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.theme-toggle:hover {
    background: rgba(207, 218, 90, 0.18);
    border-color: rgba(207, 218, 90, 0.45);
    color: var(--pk);
    transform: translateY(-1px);
}
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon { font-size: 1.1rem; line-height: 1; }
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: inline-block; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }

.theme-toggle--on-dark {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.theme-toggle--on-dark:hover {
    background: rgba(207, 218, 90, 0.22);
    border-color: rgba(207, 218, 90, 0.5);
    color: var(--g);
}

/* Landing / public surfaces that share the brand */
.site-theme-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}