/* ==========================================================================
   UNIFIED THEMES SYSTEM
   File: assets/themes.css
   ========================================================================== */

/* ==========================================================================
   DEFAULT THEME
   ========================================================================== */

:root {
    --theme-primary: #059669;
    --theme-secondary: #0d9488;

    --gradient-brand:
        linear-gradient(
            135deg,
            #059669 0%,
            #10b981 50%,
            #0d9488 100%
        );

    --badge-bg: rgba(5, 150, 105, 0.12);
    --badge-text: #059669;
    --badge-border: rgba(5, 150, 105, 0.25);

    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border-radius: 1.5rem;
    --card-border: 2px solid rgba(5, 150, 105, 0.20);
    --card-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.10);

    --bg-pattern:
        linear-gradient(
            135deg,
            rgba(5, 150, 105, 0.035) 25%,
            transparent 25%,
            transparent 50%,
            rgba(5, 150, 105, 0.035) 50%,
            rgba(5, 150, 105, 0.035) 75%,
            transparent 75%
        );

    --bg-pattern-size: 80px 80px;

    --bg-surface: #f8fafc;
    --bg-surface-hover: #f1f5f9;
    --bg-header: rgba(255, 255, 255, 0.82);

    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;

    --bg-glow-primary: rgba(5, 150, 105, 0.10);
    --bg-glow-secondary: rgba(13, 148, 136, 0.08);

    /* Subject colors */
    --science-color: #059669;
    --science-bg-light: #ecfdf5;
    --science-border: rgba(5, 150, 105, 0.25);

    --math-color: #d97706;
    --math-bg-light: #fffbeb;
    --math-border: rgba(217, 119, 6, 0.25);

    --subject-card-bg: rgba(255, 255, 255, 0.90);
}


/* ==========================================================================
   CYBER
   ========================================================================== */

[data-palette="cyber"] {
    --theme-primary: #06b6d4;
    --theme-secondary: #3b82f6;

    --gradient-brand:
        linear-gradient(
            135deg,
            #06b6d4 0%,
            #3b82f6 50%,
            #8b5cf6 100%
        );

    --badge-bg: rgba(6, 182, 212, 0.15);
    --badge-text: #0891b2;
    --badge-border: rgba(6, 182, 212, 0.30);

    --card-bg: rgba(15, 23, 42, 0.92);
    --card-border-radius: 0.75rem;
    --card-border: 2px solid rgba(6, 182, 212, 0.75);
    --card-shadow:
        0 0 20px rgba(6, 182, 212, 0.25),
        inset 0 0 10px rgba(6, 182, 212, 0.08);

    --bg-pattern:
        linear-gradient(
            to right,
            rgba(6, 182, 212, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(6, 182, 212, 0.07) 1px,
            transparent 1px
        );

    --bg-pattern-size: 36px 36px;

    --bg-glow-primary: rgba(6, 182, 212, 0.13);
    --bg-glow-secondary: rgba(139, 92, 246, 0.10);

    --science-color: #10b981;
    --science-bg-light: #ecfdf5;
    --science-border: rgba(16, 185, 129, 0.30);

    --math-color: #0891b2;
    --math-bg-light: #ecfeff;
    --math-border: rgba(6, 182, 212, 0.30);

    --subject-card-bg: rgba(15, 23, 42, 0.88);
}


/* ==========================================================================
   BRUTALISM
   ========================================================================== */

[data-palette="brutalism"] {
    --theme-primary: #facc15;
    --theme-secondary: #000000;

    --gradient-brand:
        linear-gradient(
            135deg,
            #facc15 0%,
            #fb923c 100%
        );

    --badge-bg: #facc15;
    --badge-text: #000000;
    --badge-border: #000000;

    --card-bg: #ffffff;
    --card-border-radius: 0;
    --card-border: 4px solid #000000;
    --card-shadow: 6px 6px 0 #000000;

    --bg-pattern:
        linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.035) 25%,
            transparent 25%,
            transparent 75%,
            rgba(0, 0, 0, 0.035) 75%
        );

    --bg-pattern-size: 40px 40px;

    --bg-glow-primary: rgba(250, 204, 21, 0.12);
    --bg-glow-secondary: rgba(251, 146, 60, 0.08);

    --science-color: #15803d;
    --science-bg-light: #f0fdf4;
    --science-border: rgba(21, 128, 61, 0.30);

    --math-color: #ca8a04;
    --math-bg-light: #fefce8;
    --math-border: rgba(202, 138, 4, 0.35);

    --subject-card-bg: #ffffff;
}


/* ==========================================================================
   GLASS
   ========================================================================== */

[data-palette="glass"] {
    --theme-primary: #ec4899;
    --theme-secondary: #8b5cf6;

    --gradient-brand:
        linear-gradient(
            135deg,
            rgba(236, 72, 153, 0.90),
            rgba(139, 92, 246, 0.90)
        );

    --badge-bg: rgba(255, 255, 255, 0.30);
    --badge-text: #7e22ce;
    --badge-border: rgba(255, 255, 255, 0.55);

    --card-bg: rgba(255, 255, 255, 0.48);
    --card-border-radius: 2rem;
    --card-border: 1px solid rgba(255, 255, 255, 0.65);
    --card-shadow: 0 20px 40px rgba(31, 38, 135, 0.08);

    --bg-pattern:
        radial-gradient(
            circle at 50% 50%,
            rgba(236, 72, 153, 0.10),
            rgba(139, 92, 246, 0.08)
        );

    --bg-pattern-size: 100% 100%;

    --bg-glow-primary: rgba(236, 72, 153, 0.13);
    --bg-glow-secondary: rgba(139, 92, 246, 0.12);

    --science-color: #059669;
    --science-bg-light: #ecfdf5;
    --science-border: rgba(5, 150, 105, 0.25);

    --math-color: #db2777;
    --math-bg-light: #fdf2f8;
    --math-border: rgba(219, 39, 119, 0.25);

    --subject-card-bg: rgba(255, 255, 255, 0.48);
}


/* ==========================================================================
   AURORA
   ========================================================================== */

[data-palette="aurora"] {
    --theme-primary: #f43f5e;
    --theme-secondary: #a855f7;

    --gradient-brand:
        linear-gradient(
            135deg,
            #f43f5e 0%,
            #fb7185 50%,
            #a855f7 100%
        );

    --badge-bg: rgba(244, 63, 94, 0.12);
    --badge-text: #e11d48;
    --badge-border: rgba(244, 63, 94, 0.30);

    --card-bg: rgba(255, 255, 255, 0.90);
    --card-border-radius: 1.75rem;
    --card-border: 2px solid rgba(244, 63, 94, 0.25);
    --card-shadow: 0 12px 30px -5px rgba(244, 63, 94, 0.20);

    --bg-pattern:
        linear-gradient(
            135deg,
            rgba(244, 63, 94, 0.035),
            transparent 45%,
            rgba(168, 85, 247, 0.045)
        );

    --bg-pattern-size: 100% 100%;

    --bg-glow-primary: rgba(244, 63, 94, 0.12);
    --bg-glow-secondary: rgba(168, 85, 247, 0.11);

    --science-color: #059669;
    --science-bg-light: #ecfdf5;
    --science-border: rgba(5, 150, 105, 0.25);

    --math-color: #e11d48;
    --math-bg-light: #fff1f2;
    --math-border: rgba(244, 63, 94, 0.30);

    --subject-card-bg: rgba(255, 255, 255, 0.90);
}


/* ==========================================================================
   OCEAN
   ========================================================================== */

[data-palette="ocean"] {
    --theme-primary: #0284c7;
    --theme-secondary: #0d9488;

    --gradient-brand:
        linear-gradient(
            135deg,
            #0284c7 0%,
            #38bdf8 50%,
            #0d9488 100%
        );

    --badge-bg: rgba(2, 132, 199, 0.12);
    --badge-text: #0284c7;
    --badge-border: rgba(2, 132, 199, 0.30);

    --card-bg: rgba(240, 249, 255, 0.88);
    --card-border-radius: 1.25rem;
    --card-border: 2px solid rgba(2, 132, 199, 0.20);
    --card-shadow: 0 8px 24px rgba(2, 132, 199, 0.15);

    --bg-pattern:
        linear-gradient(
            135deg,
            rgba(2, 132, 199, 0.035) 25%,
            transparent 25%,
            transparent 50%,
            rgba(13, 148, 136, 0.035) 50%,
            rgba(13, 148, 136, 0.035) 75%,
            transparent 75%
        );

    --bg-pattern-size: 70px 70px;

    --bg-glow-primary: rgba(2, 132, 199, 0.12);
    --bg-glow-secondary: rgba(13, 148, 136, 0.10);

    --science-color: #0d9488;
    --science-bg-light: #f0fdfa;
    --science-border: rgba(13, 148, 136, 0.28);

    --math-color: #0284c7;
    --math-bg-light: #f0f9ff;
    --math-border: rgba(2, 132, 199, 0.30);

    --subject-card-bg: rgba(240, 249, 255, 0.88);
}


/* ==========================================================================
   CLASSIC PAPER
   ========================================================================== */

[data-palette="classic-paper"] {
    --theme-primary: #854d0e;
    --theme-secondary: #b45309;

    --gradient-brand:
        linear-gradient(
            135deg,
            #854d0e 0%,
            #d97706 100%
        );

    --badge-bg: #fef3c7;
    --badge-text: #78350f;
    --badge-border: #b45309;

    --card-bg: #fefce8;
    --card-border-radius: 0.5rem;
    --card-border: 2px dashed #b45309;
    --card-shadow: 3px 3px 12px rgba(120, 53, 15, 0.15);

    --bg-pattern:
        linear-gradient(
            to bottom,
            rgba(180, 83, 9, 0.05) 1px,
            transparent 1px
        );

    --bg-pattern-size: 100% 24px;

    --bg-glow-primary: rgba(217, 119, 6, 0.08);
    --bg-glow-secondary: rgba(180, 83, 9, 0.06);

    --science-color: #15803d;
    --science-bg-light: #f0fdf4;
    --science-border: rgba(21, 128, 61, 0.25);

    --math-color: #b45309;
    --math-bg-light: #fffbeb;
    --math-border: rgba(180, 83, 9, 0.30);

    --subject-card-bg: #fefce8;
}


/* ==========================================================================
   GOLD
   ========================================================================== */

[data-palette="gold"] {
    --theme-primary: #eab308;
    --theme-secondary: #ca8a04;

    --gradient-brand:
        linear-gradient(
            135deg,
            #fef08a 0%,
            #eab308 50%,
            #854d0e 100%
        );

    --badge-bg: rgba(234, 179, 8, 0.15);
    --badge-text: #a16207;
    --badge-border: rgba(234, 179, 8, 0.55);

    --card-bg: rgba(24, 24, 27, 0.95);
    --card-border-radius: 1rem;
    --card-border: 1.5px solid #eab308;
    --card-shadow: 0 10px 30px rgba(234, 179, 8, 0.20);

    --bg-pattern:
        linear-gradient(
            135deg,
            rgba(234, 179, 8, 0.035) 25%,
            transparent 25%,
            transparent 50%,
            rgba(234, 179, 8, 0.035) 50%,
            rgba(234, 179, 8, 0.035) 75%,
            transparent 75%
        );

    --bg-pattern-size: 64px 64px;

    --bg-glow-primary: rgba(234, 179, 8, 0.12);
    --bg-glow-secondary: rgba(202, 138, 4, 0.08);

    --science-color: #10b981;
    --science-bg-light: #ecfdf5;
    --science-border: rgba(16, 185, 129, 0.30);

    --math-color: #eab308;
    --math-bg-light: #422006;
    --math-border: rgba(234, 179, 8, 0.40);

    --subject-card-bg: rgba(24, 24, 27, 0.95);
}


/* ==========================================================================
   SCIENCE LAB
   ========================================================================== */

[data-palette="sci-lab"] {
    --theme-primary: #10b981;
    --theme-secondary: #06b6d4;

    --gradient-brand:
        linear-gradient(
            135deg,
            #059669 0%,
            #10b981 50%,
            #06b6d4 100%
        );

    --badge-bg: rgba(16, 185, 129, 0.15);
    --badge-text: #047857;
    --badge-border: rgba(16, 185, 129, 0.40);

    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border-radius: 1.5rem 0.25rem 1.5rem 0.25rem;
    --card-border: 2px solid #10b981;
    --card-shadow: 0 12px 25px rgba(16, 185, 129, 0.15);

    --bg-pattern:
        linear-gradient(
            45deg,
            rgba(16, 185, 129, 0.05) 25%,
            transparent 25%,
            transparent 75%,
            rgba(6, 182, 212, 0.05) 75%
        );

    --bg-pattern-size: 48px 48px;

    --bg-glow-primary: rgba(16, 185, 129, 0.11);
    --bg-glow-secondary: rgba(6, 182, 212, 0.10);

    --science-color: #059669;
    --science-bg-light: #ecfdf5;
    --science-border: rgba(5, 150, 105, 0.35);

    --math-color: #0d9488;
    --math-bg-light: #f0fdfa;
    --math-border: rgba(13, 148, 136, 0.30);

    --subject-card-bg: rgba(255, 255, 255, 0.92);
}


/* ==========================================================================
   MATH GRID
   ========================================================================== */

[data-palette="math-grid"] {
    --theme-primary: #4f46e5;
    --theme-secondary: #f59e0b;

    --gradient-brand:
        linear-gradient(
            135deg,
            #4f46e5 0%,
            #7c3aed 50%,
            #d97706 100%
        );

    --badge-bg: rgba(79, 70, 229, 0.12);
    --badge-text: #4338ca;
    --badge-border: rgba(79, 70, 229, 0.30);

    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border-radius: 1.25rem;
    --card-border: 2px solid rgba(79, 70, 229, 0.25);
    --card-shadow: 0 12px 28px rgba(79, 70, 229, 0.12);

    --bg-pattern:
        linear-gradient(
            rgba(79, 70, 229, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(79, 70, 229, 0.055) 1px,
            transparent 1px
        );

    --bg-pattern-size: 40px 40px;

    --bg-glow-primary: rgba(79, 70, 229, 0.11);
    --bg-glow-secondary: rgba(245, 158, 11, 0.08);

    --science-color: #4f46e5;
    --science-bg-light: #eef2ff;
    --science-border: rgba(79, 70, 229, 0.30);

    --math-color: #4338ca;
    --math-bg-light: #eef2ff;
    --math-border: rgba(79, 70, 229, 0.30);

    --subject-card-bg: rgba(255, 255, 255, 0.92);
}


/* ==========================================================================
   COSMIC
   ========================================================================== */

[data-palette="cosmic"] {
    --theme-primary: #8b5cf6;
    --theme-secondary: #ec4899;

    --gradient-brand:
        linear-gradient(
            135deg,
            #4c1d95 0%,
            #8b5cf6 50%,
            #ec4899 100%
        );

    --badge-bg: rgba(139, 92, 246, 0.13);
    --badge-text: #7c3aed;
    --badge-border: rgba(139, 92, 246, 0.30);

    --card-bg: rgba(255, 255, 255, 0.91);
    --card-border-radius: 1.5rem;
    --card-border: 2px solid rgba(139, 92, 246, 0.25);
    --card-shadow: 0 14px 32px rgba(139, 92, 246, 0.14);

    --bg-pattern:
        radial-gradient(
            circle at 20% 20%,
            rgba(139, 92, 246, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(236, 72, 153, 0.08),
            transparent 25%
        );

    --bg-pattern-size: 100% 100%;

    --bg-glow-primary: rgba(139, 92, 246, 0.13);
    --bg-glow-secondary: rgba(236, 72, 153, 0.10);

    --science-color: #7c3aed;
    --science-bg-light: #f5f3ff;
    --science-border: rgba(124, 58, 237, 0.28);

    --math-color: #9333ea;
    --math-bg-light: #faf5ff;
    --math-border: rgba(147, 51, 234, 0.30);

    --subject-card-bg: rgba(255, 255, 255, 0.91);
}


/* ==========================================================================
   FOREST
   ========================================================================== */

[data-palette="forest"] {
    --theme-primary: #15803d;
    --theme-secondary: #65a30d;

    --gradient-brand:
        linear-gradient(
            135deg,
            #14532d 0%,
            #15803d 50%,
            #65a30d 100%
        );

    --badge-bg: rgba(21, 128, 61, 0.13);
    --badge-text: #15803d;
    --badge-border: rgba(21, 128, 61, 0.30);

    --card-bg: rgba(255, 255, 255, 0.91);
    --card-border-radius: 1.25rem;
    --card-border: 2px solid rgba(21, 128, 61, 0.25);
    --card-shadow: 0 12px 28px rgba(21, 128, 61, 0.12);

    --bg-pattern:
        linear-gradient(
            135deg,
            rgba(21, 128, 61, 0.045) 25%,
            transparent 25%,
            transparent 50%,
            rgba(101, 163, 13, 0.045) 50%,
            rgba(101, 163, 13, 0.045) 75%,
            transparent 75%
        );

    --bg-pattern-size: 72px 72px;

    --bg-glow-primary: rgba(21, 128, 61, 0.10);
    --bg-glow-secondary: rgba(101, 163, 13, 0.08);

    --science-color: #15803d;
    --science-bg-light: #f0fdf4;
    --science-border: rgba(21, 128, 61, 0.30);

    --math-color: #166534;
    --math-bg-light: #f0fdf4;
    --math-border: rgba(22, 101, 52, 0.30);

    --subject-card-bg: rgba(255, 255, 255, 0.91);
}


/* ==========================================================================
   GOLDEN
   ========================================================================== */

[data-palette="golden"] {
    --theme-primary: #ea580c;
    --theme-secondary: #ca8a04;

    --gradient-brand:
        linear-gradient(
            135deg,
            #c2410c 0%,
            #ea580c 50%,
            #eab308 100%
        );

    --badge-bg: rgba(234, 88, 12, 0.13);
    --badge-text: #c2410c;
    --badge-border: rgba(234, 88, 12, 0.30);

    --card-bg: rgba(255, 255, 255, 0.91);
    --card-border-radius: 1.25rem;
    --card-border: 2px solid rgba(234, 88, 12, 0.25);
    --card-shadow: 0 12px 28px rgba(234, 88, 12, 0.12);

    --bg-pattern:
        linear-gradient(
            135deg,
            rgba(234, 88, 12, 0.04) 25%,
            transparent 25%,
            transparent 50%,
            rgba(234, 179, 8, 0.04) 50%,
            rgba(234, 179, 8, 0.04) 75%,
            transparent 75%
        );

    --bg-pattern-size: 72px 72px;

    --bg-glow-primary: rgba(234, 88, 12, 0.11);
    --bg-glow-secondary: rgba(234, 179, 8, 0.10);

    --science-color: #ea580c;
    --science-bg-light: #fff7ed;
    --science-border: rgba(234, 88, 12, 0.28);

    --math-color: #d97706;
    --math-bg-light: #fffbeb;
    --math-border: rgba(217, 119, 6, 0.30);

    --subject-card-bg: rgba(255, 255, 255, 0.91);
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */

html.dark {
    --bg-surface: #0f172a;
    --bg-surface-hover: #1e293b;
    --bg-header: rgba(15, 23, 42, 0.84);

    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color: #334155;

    --card-bg: rgba(15, 23, 42, 0.90);
    --subject-card-bg: rgba(15, 23, 42, 0.90);
}


/* Dark Cyber */
html.dark [data-palette="cyber"] {
    --bg-surface: #020617;
    --bg-surface-hover: #0f172a;
    --bg-header: rgba(2, 6, 23, 0.88);

    --text-main: #e0f2fe;
    --text-muted: #94a3b8;
    --border-color: #164e63;

    --card-bg: rgba(8, 20, 35, 0.94);
    --subject-card-bg: rgba(8, 20, 35, 0.94);
}


/* Dark Brutalism */
html.dark [data-palette="brutalism"] {
    --bg-surface: #111111;
    --bg-surface-hover: #1a1a1a;
    --bg-header: rgba(17, 17, 17, 0.90);

    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --border-color: #444444;

    --card-bg: #171717;
    --subject-card-bg: #171717;
}


/* Dark Glass */
html.dark [data-palette="glass"] {
    --bg-surface: #111827;
    --bg-surface-hover: #1f2937;
    --bg-header: rgba(17, 24, 39, 0.86);

    --text-main: #f3f4f6;
    --text-muted: #cbd5e1;
    --border-color: #374151;

    --card-bg: rgba(17, 24, 39, 0.78);
    --subject-card-bg: rgba(17, 24, 39, 0.78);
}


/* Dark Gold */
html.dark [data-palette="gold"] {
    --bg-surface: #09090b;
    --bg-surface-hover: #18181b;
    --bg-header: rgba(9, 9, 11, 0.90);

    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    --border-color: #3f3f46;

    --card-bg: rgba(24, 24, 27, 0.96);
    --subject-card-bg: rgba(24, 24, 27, 0.96);
}


/* Dark Aurora */
html.dark [data-palette="aurora"],
html.dark [data-palette="ocean"],
html.dark [data-palette="sci-lab"],
html.dark [data-palette="lavender"],
html.dark [data-palette="classic-paper"],
html.dark [data-palette="math-grid"],
html.dark [data-palette="cosmic"],
html.dark [data-palette="forest"],
html.dark [data-palette="golden"] {
    --bg-surface: #0f172a;
    --bg-surface-hover: #1e293b;
    --bg-header: rgba(15, 23, 42, 0.86);

    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color: #334155;

    --card-bg: rgba(15, 23, 42, 0.90);
    --subject-card-bg: rgba(15, 23, 42, 0.90);
}


/* ==========================================================================
   GLOBAL PAGE BACKGROUND
   ========================================================================== */

.theme-page-bg {
    background-color: var(--bg-surface);

    background-image:
        radial-gradient(
            circle at 92% 5%,
            var(--bg-glow-primary) 0,
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 92%,
            var(--bg-glow-secondary) 0,
            transparent 25%
        ),
        var(--bg-pattern);

    background-repeat:
        no-repeat,
        no-repeat,
        repeat;

    background-size:
        auto,
        auto,
        var(--bg-pattern-size);

    color: var(--text-main);
}


/* ==========================================================================
   DYNAMIC BACKGROUND PATTERN
   ========================================================================== */

.dynamic-bg-pattern {
    background-image: var(--bg-pattern);
    background-size: var(--bg-pattern-size);
}


/* ==========================================================================
   GLOBAL CARDS
   ========================================================================== */

.dynamic-card {
    background: var(--card-bg) !important;
    border-radius: var(--card-border-radius) !important;
    border: var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s ease;
}


.dynamic-card:hover {
    transform: translateY(-4px);
}


/* ==========================================================================
   SUBJECT CARDS
   ========================================================================== */

.subject-card {
    background: var(--subject-card-bg) !important;
    border-radius: var(--card-border-radius);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.subject-card:hover {
    transform: translateY(-5px);
}


/* Mathematics */
.card-math {
    border: 2px solid var(--math-border) !important;
}


.card-math:hover {
    border-color: var(--math-color) !important;
}


/* Science */
.card-science {
    border: 2px solid var(--science-border) !important;
}


.card-science:hover {
    border-color: var(--science-color) !important;
}


/* ==========================================================================
   SUBJECT COLORS
   ========================================================================== */

.text-math {
    color: var(--math-color) !important;
}


.bg-math-light {
    background-color: var(--math-bg-light) !important;
}


.text-science {
    color: var(--science-color) !important;
}


.bg-science-light {
    background-color: var(--science-bg-light) !important;
}


/* ==========================================================================
   GRADIENT SYSTEM
   ========================================================================== */

.custom-gradient-text {
    background: var(--gradient-brand);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.custom-gradient-bg {
    background: var(--gradient-brand) !important;
}


/* ==========================================================================
   BADGES
   ========================================================================== */

.badge-dynamic {
    background-color: var(--badge-bg) !important;
    color: var(--badge-text) !important;
    border-color: var(--badge-border) !important;
}


/* ==========================================================================
   GLASS PANELS
   ========================================================================== */

.glass-panel {
    background: var(--bg-header);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* ==========================================================================
   AUTH INPUTS
   ========================================================================== */

.auth-input {
    width: 100%;
    padding: 12px 16px;

    border-radius: 12px;

    border: 1px solid var(--border-color);

    background: var(--bg-surface-hover);

    color: var(--text-main);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


.auth-input::placeholder {
    color: var(--text-muted);
}


.auth-input:focus {
    border-color: var(--theme-primary);

    box-shadow:
        0 0 0 3px rgba(5, 150, 105, 0.12);
}


html.dark .auth-input:focus {
    box-shadow:
        0 0 0 3px rgba(6, 182, 212, 0.12);
}


/* ==========================================================================
   SHARED SURFACE UTILITIES
   ========================================================================== */

.theme-surface {
    background-color: var(--bg-surface);
}


.theme-surface-hover {
    background-color: var(--bg-surface-hover);
}


.theme-text {
    color: var(--text-main);
}


.theme-muted {
    color: var(--text-muted);
}


.theme-border {
    border-color: var(--border-color);
}


/* ==========================================================================
   ACCESSIBILITY / MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .dynamic-card,
    .subject-card {
        transition: none;
    }

    .dynamic-card:hover,
    .subject-card:hover {
        transform: none;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .dynamic-card:hover,
    .subject-card:hover {
        transform: none;
    }

    .theme-page-bg {
        background-size:
            auto,
            auto,
            56px 56px;
    }
}