/*
 * themes.css
 *
 * CSS custom property definitions for all five APStudy themes.
 * Each [data-theme] selector overrides the variables that Tailwind utilities reference.
 * Include this file on EVERY page via <link>.
 *
 * Tailwind config is centralized in tailwind.config.cjs and compiled to static/css/tailwind.css.
 * Do not duplicate Tailwind config blocks across pages.
 */
:root {
    --color-shell-bg: var(--color-surface-container-low);
    --color-shell-border: var(--color-outline-variant);
    --color-shell-text-primary: var(--color-on-surface);
    --color-shell-text-secondary: var(--color-on-surface-variant);
    --color-shell-text-muted: color-mix(in srgb, var(--color-on-surface-variant) 72%, var(--color-surface) 28%);
    --color-shell-accent: var(--color-primary);
    --color-shell-hover-bg: color-mix(in srgb, var(--color-primary) 14%, transparent);
    --color-shell-active-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
    --color-shell-toggle-line-bg: color-mix(in srgb, var(--color-on-surface-variant) 35%, var(--color-surface-container-low) 65%);
    --color-shell-toggle-icon-bg: var(--color-surface-container-high);
    --color-shell-toggle-icon-hover-bg: color-mix(in srgb, var(--color-surface-container-high) 76%, var(--color-primary) 24%);
    --color-shell-tooltip-bg: var(--color-surface-container-high);
    --color-shell-dropdown-hover-bg: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
    --color-shell-danger-hover-bg: color-mix(in srgb, var(--color-error) 12%, transparent);
    --color-shell-danger-hover-text: var(--color-error);
    --color-shell-shadow: rgba(0, 0, 0, 0.35);
    --color-shell-dropdown-border: var(--color-outline-variant);
    --color-sidebar-bg: var(--color-shell-bg);
    --color-sidebar-border: var(--color-shell-border);
    /* Semantic state colors for toasts/notifications.
       Light defaults here; dark themes override below. Error reuses --color-error. */
    --color-success: #1f7a4d;
    --color-warning: #b26a00;
    --color-info: #0060aa;
    --toast-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
/* ============================
   OBSIDIAN DARK (default dark)
   ============================ */
[data-theme="obsidian-dark"] {
    --color-surface-container: #1c2026;
    --color-surface: #10141a;
    --color-surface-bright: #353940;
    --color-surface-dim: #10141a;
    --color-surface-container-low: #181c22;
    --color-surface-container-high: #262a31;
    --color-surface-container-highest: #31353c;
    --color-surface-container-lowest: #0a0e14;
    --color-surface-variant: #31353c;
    --color-on-surface: #dfe2eb;
    --color-on-surface-variant: #c0c7d4;
    --color-on-background: #dfe2eb;
    --color-background: #10141a;
    --color-primary: #a2c9ff;
    --color-primary-container: #58a6ff;
    --color-on-primary: #00315c;
    --color-on-primary-container: #003a6b;
    --color-secondary: #aec8ef;
    --color-secondary-container: #2e4869;
    --color-on-secondary: #163151;
    --color-on-secondary-container: #9db7dd;
    --color-tertiary: #ffba42;
    --color-tertiary-container: #da9600;
    --color-on-tertiary: #432c00;
    --color-on-tertiary-container: #4f3400;
    --color-outline: #8b919d;
    --color-outline-variant: #414752;
    --color-error: #ffb4ab;
    --color-error-container: #93000a;
    --color-on-error: #690005;
    --color-on-error-container: #ffdad6;
    --color-inverse-surface: #dfe2eb;
    --color-inverse-on-surface: #2d3137;
    --color-inverse-primary: #0060aa;
    --color-surface-tint: #a2c9ff;
    --color-sidebar-bg: #181c22;
    --color-sidebar-border: #1c2026;
    --color-calendar-rule: #232830;
    --color-success: #6cd08f;
    --color-warning: #ffba42;
    --color-info: #7cb3ff;
    --toast-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
/* ============================
   PARCHMENT LIGHT
   Inspired by Notion's warm white canvas.
   Background is clean white; containers use
   warm off-white/cream tones for layering.
   ============================ */
[data-theme="parchment-light"] {
    --color-surface-container: #f0eeeb;
    --color-surface: #ffffff;
    --color-surface-bright: #ffffff;
    --color-surface-dim: #d9d6d1;
    --color-surface-container-low: #f7f6f3;
    --color-surface-container-high: #e8e6e1;
    --color-surface-container-highest: #e0ddd8;
    --color-surface-container-lowest: #ffffff;
    --color-surface-variant: #e3e0db;
    --color-on-surface: #1f1f1e;
    --color-on-surface-variant: #4b4a47;
    --color-on-background: #1f1f1e;
    --color-background: #ffffff;
    --color-primary: #0060aa;
    --color-primary-container: #d3e4ff;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #001c38;
    --color-secondary: #37474f;
    --color-secondary-container: #d6e3ea;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #0d1b22;
    --color-tertiary: #7a5900;
    --color-tertiary-container: #ffddaf;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #281800;
    --color-outline: #79786e;
    --color-outline-variant: #c5c3ba;
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error: #ffffff;
    --color-on-error-container: #410002;
    --color-inverse-surface: #313130;
    --color-inverse-on-surface: #f4f1ec;
    --color-inverse-primary: #a2c9ff;
    --color-surface-tint: #0060aa;
    --color-sidebar-bg: #f7f6f3;
    --color-sidebar-border: #e8e6e1;
    --color-calendar-rule: #c5c3ba;
}
/* ============================
   SYSTEM MATCH
   Default: Parchment Light. Dark override via media query.
   ============================ */
[data-theme="system-match"] {
    --color-surface-container: #f0eeeb;
    --color-surface: #ffffff;
    --color-surface-bright: #ffffff;
    --color-surface-dim: #d9d6d1;
    --color-surface-container-low: #f7f6f3;
    --color-surface-container-high: #e8e6e1;
    --color-surface-container-highest: #e0ddd8;
    --color-surface-container-lowest: #ffffff;
    --color-surface-variant: #e3e0db;
    --color-on-surface: #1f1f1e;
    --color-on-surface-variant: #4b4a47;
    --color-on-background: #1f1f1e;
    --color-background: #ffffff;
    --color-primary: #0060aa;
    --color-primary-container: #d3e4ff;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #001c38;
    --color-secondary: #37474f;
    --color-secondary-container: #d6e3ea;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #0d1b22;
    --color-tertiary: #7a5900;
    --color-tertiary-container: #ffddaf;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #281800;
    --color-outline: #79786e;
    --color-outline-variant: #c5c3ba;
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error: #ffffff;
    --color-on-error-container: #410002;
    --color-inverse-surface: #313130;
    --color-inverse-on-surface: #f4f1ec;
    --color-inverse-primary: #a2c9ff;
    --color-surface-tint: #0060aa;
    --color-sidebar-bg: #f7f6f3;
    --color-sidebar-border: #e8e6e1;
    --color-calendar-rule: #c5c3ba;
}
@media (prefers-color-scheme: dark) {
    [data-theme="system-match"] {
        --color-surface-container: #1c2026;
        --color-surface: #10141a;
        --color-surface-bright: #353940;
        --color-surface-dim: #10141a;
        --color-surface-container-low: #181c22;
        --color-surface-container-high: #262a31;
        --color-surface-container-highest: #31353c;
        --color-surface-container-lowest: #0a0e14;
        --color-surface-variant: #31353c;
        --color-on-surface: #dfe2eb;
        --color-on-surface-variant: #c0c7d4;
        --color-on-background: #dfe2eb;
        --color-background: #10141a;
        --color-primary: #a2c9ff;
        --color-primary-container: #58a6ff;
        --color-on-primary: #00315c;
        --color-on-primary-container: #003a6b;
        --color-secondary: #aec8ef;
        --color-secondary-container: #2e4869;
        --color-on-secondary: #163151;
        --color-on-secondary-container: #9db7dd;
        --color-tertiary: #ffba42;
        --color-tertiary-container: #da9600;
        --color-on-tertiary: #432c00;
        --color-on-tertiary-container: #4f3400;
        --color-outline: #8b919d;
        --color-outline-variant: #414752;
        --color-error: #ffb4ab;
        --color-error-container: #93000a;
        --color-on-error: #690005;
        --color-on-error-container: #ffdad6;
        --color-inverse-surface: #dfe2eb;
        --color-inverse-on-surface: #2d3137;
        --color-inverse-primary: #0060aa;
        --color-surface-tint: #a2c9ff;
        --color-sidebar-bg: #181c22;
        --color-sidebar-border: #1c2026;
        --color-calendar-rule: #232830;
        --color-success: #6cd08f;
        --color-warning: #ffba42;
        --color-info: #7cb3ff;
        --toast-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    }
}
/* ============================
    NEST LIGHT
    Drawn from nest.edu brand guidelines:
    Nest Blue #012169, Nest Gold #F2A900,
    Nest Light Blue #007DBA, Nest Dark Blue #0C2344.
   Crisp white base, warm stone-gray containers.
   ============================ */
[data-theme="nest-light"] {
    --color-surface-container: #EAEAE4;
    --color-surface: #FFFFFF;
    --color-surface-bright: #FFFFFF;
    --color-surface-dim: #D0CFC9;
    --color-surface-container-low: #F6F6F2;
    --color-surface-container-high: #E6E6E0;
    --color-surface-container-highest: #DDDDD7;
    --color-surface-container-lowest: #FFFFFF;
    --color-surface-variant: #E6E6E0;
    --color-on-surface: #222222;
    --color-on-surface-variant: #4A4A48;
    --color-on-background: #222222;
    --color-background: #FFFFFF;
    --color-primary: #012169;
    --color-primary-container: #C8D6F0;
    --color-on-primary: #FFFFFF;
    --color-on-primary-container: #001240;
    --color-secondary: #007DBA;
    --color-secondary-container: #C4E0F2;
    --color-on-secondary: #FFFFFF;
    --color-on-secondary-container: #002840;
    --color-tertiary: #F2A900;
    --color-tertiary-container: #FCEBC4;
    --color-on-tertiary: #FFFFFF;
    --color-on-tertiary-container: #3D2A00;
    --color-outline: #74726C;
    --color-outline-variant: #B8B6AE;
    --color-error: #BA1A1A;
    --color-error-container: #FFDAD6;
    --color-on-error: #FFFFFF;
    --color-on-error-container: #410002;
    --color-inverse-surface: #0C2344;
    --color-inverse-on-surface: #EAEAE4;
    --color-inverse-primary: #A2C0FF;
    --color-surface-tint: #012169;
    --color-sidebar-bg: #F6F6F2;
    --color-sidebar-border: #E6E6E0;
    --color-calendar-rule: #B8B6AE;
}
/* ============================
    NEST DARK
   ============================ */
[data-theme="nest-dark"] {
    --color-surface-container: #101730;
    --color-surface: #0a0f22;
    --color-surface-bright: #252c48;
    --color-surface-dim: #0a0f22;
    --color-surface-container-low: #0d1328;
    --color-surface-container-high: #1a2140;
    --color-surface-container-highest: #222a4a;
    --color-surface-container-lowest: #060a18;
    --color-surface-variant: #222a4a;
    --color-on-surface: #d6ddf0;
    --color-on-surface-variant: #a0a8c4;
    --color-on-background: #d6ddf0;
    --color-background: #0a0f22;
    --color-primary: #D4AF37;
    --color-primary-container: #012169;
    --color-on-primary: #0a0f22;
    --color-on-primary-container: #D4AF37;
    --color-secondary: #8eaadc;
    --color-secondary-container: #1a2f5c;
    --color-on-secondary: #0a0f22;
    --color-on-secondary-container: #8eaadc;
    --color-tertiary: #D4AF37;
    --color-tertiary-container: #5c4a00;
    --color-on-tertiary: #1a1400;
    --color-on-tertiary-container: #D4AF37;
    --color-outline: #6b7394;
    --color-outline-variant: #333b5c;
    --color-error: #ffb4ab;
    --color-error-container: #93000a;
    --color-on-error: #690005;
    --color-on-error-container: #ffdad6;
    --color-inverse-surface: #d6ddf0;
    --color-inverse-on-surface: #1a2140;
    --color-inverse-primary: #012169;
    --color-surface-tint: #D4AF37;
    --color-sidebar-bg: #0d1328;
    --color-sidebar-border: #101730;
    --color-calendar-rule: #171e38;
    --color-success: #6cd08f;
    --color-warning: #ffba42;
    --color-info: #7cb3ff;
    --toast-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}