/* ===========================================
   THEME SYSTEM
   Custom colors are set via inline styles from institution settings.
   =========================================== */

/* Light Theme (default) */
:root {
    /* Background colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;

    /* Text colors */
    --color-text-primary: #0f172a;
    --color-text-secondary: #64748b;

    /* Border */
    --color-border: #e2e8f0;

    /* Primary/Accent color - defaults, overridden by institution settings */
    --color-primary: #6366f1;
    --color-accent: #6366f1;
    --color-accent-hover: #4f46e5;
    --color-accent-light: #818cf8;
    --color-accent-alpha: rgba(99, 102, 241, 0.1);

    /* Secondary color - defaults, overridden by institution settings */
    --color-secondary: #f59e0b;
    --color-secondary-hover: #d97706;

    /* Status colors */
    --color-success: #22c55e;
    --color-success-bg: #f0fdf4;
    --color-success-text: #166534;

    --color-danger: #ef4444;
    --color-danger-bg: #fef2f2;
    --color-danger-text: #991b1b;

    --color-warning: #f59e0b;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #92400e;

    --color-info: #3b82f6;
    --color-info-bg: #eff6ff;
    --color-info-text: #1e40af;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
}

/* Dark Theme */
html.dark,
html.dark body {
    /* Background colors */
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;

    /* Text colors */
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;

    /* Border */
    --color-border: #334155;

    /* Primary/Accent - lighter for dark mode (will be overridden by JS if custom) */
    --color-primary: #6366f1;
    --color-accent: #818cf8;
    --color-accent-hover: #6366f1;
    --color-accent-light: #a5b4fc;
    --color-accent-alpha: rgba(129, 140, 248, 0.15);

    /* Secondary - lighter for dark mode */
    --color-secondary: #fbbf24;
    --color-secondary-hover: #f59e0b;

    /* Status colors - dark mode versions */
    --color-success-bg: #052e16;
    --color-success-text: #86efac;

    --color-danger-bg: #450a0a;
    --color-danger-text: #fca5a5;

    --color-warning-bg: #451a03;
    --color-warning-text: #fcd34d;

    --color-info-bg: #1e3a5f;
    --color-info-text: #93c5fd;

    /* Shadows - darker for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}

/* Auto theme - follows system preference */
@media (prefers-color-scheme: dark) {
    html.auto,
    html.auto body {
        /* Background colors */
        --color-bg-primary: #0f172a;
        --color-bg-secondary: #1e293b;
        --color-bg-tertiary: #334155;

        /* Text colors */
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #94a3b8;

        /* Border */
        --color-border: #334155;

        /* Primary/Accent - lighter for dark mode */
        --color-accent: #818cf8;
        --color-accent-hover: #6366f1;
        --color-accent-light: #a5b4fc;
        --color-accent-alpha: rgba(129, 140, 248, 0.15);

        /* Secondary - lighter for dark mode */
        --color-secondary: #fbbf24;
        --color-secondary-hover: #f59e0b;

        /* Status colors - dark mode versions */
        --color-success-bg: #052e16;
        --color-success-text: #86efac;

        --color-danger-bg: #450a0a;
        --color-danger-text: #fca5a5;

        --color-warning-bg: #451a03;
        --color-warning-text: #fcd34d;

        --color-info-bg: #1e3a5f;
        --color-info-text: #93c5fd;

        /* Shadows */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    }
}