/* ============================================
   CHUR TRACKER — Design System
   Material Design 3 + Cyberpunk
   ============================================ */

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --md-sys-color-primary: #64B5F6;
    --md-sys-color-on-primary: #003258;
    --md-sys-color-primary-container: #00497D;
    --md-sys-color-on-primary-container: #D1E4FF;
    --md-sys-color-secondary: #4DD0E1;
    --md-sys-color-on-secondary: #00363D;
    --md-sys-color-secondary-container: #004F58;
    --md-sys-color-on-secondary-container: #B2EBF2;
    --md-sys-color-tertiary: #CE93D8;
    --md-sys-color-on-tertiary: #3A1045;
    --md-sys-color-tertiary-container: #55295F;
    --md-sys-color-on-tertiary-container: #F3E5F5;
    --md-sys-color-error: #FF5252;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;
    --md-sys-color-success: #69F0AE;
    --md-sys-color-on-success: #003920;
    --md-sys-color-success-container: #00522F;
    --md-sys-color-on-success-container: #C8E6C9;
    --md-sys-color-warning: #FFD740;
    --md-sys-color-on-warning: #3E2D00;
    --md-sys-color-warning-container: #5A4300;
    --md-sys-color-on-warning-container: #FFECB3;
    --md-sys-color-surface: #0F172A;
    --md-sys-color-on-surface: #E2E8F0;
    --md-sys-color-surface-variant: #1E293B;
    --md-sys-color-on-surface-variant: #94A3B8;
    --md-sys-color-surface-container: #1A2332;
    --md-sys-color-surface-container-high: #233044;
    --md-sys-color-surface-container-highest: #2D3A52;
    --md-sys-color-background: #0A0F1A;
    --md-sys-color-on-background: #E2E8F0;
    --md-sys-color-outline: #334155;
    --md-sys-color-outline-variant: #475569;
    --glow-primary: 0 0 20px rgba(100, 181, 246, 0.3);
    --glow-secondary: 0 0 20px rgba(77, 208, 225, 0.3);
    --glow-tertiary: 0 0 20px rgba(206, 147, 216, 0.3);
    --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    --gradient-card: linear-gradient(135deg, #1A2332 0%, #233044 100%);
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-display: var(--font-mono);
    --font-body: var(--font-mono);
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
}

[data-theme="light"] {
    --md-sys-color-primary: #1565C0;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D1E4FF;
    --md-sys-color-on-primary-container: #001D36;
    --md-sys-color-secondary: #00838F;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #B2EBF2;
    --md-sys-color-on-secondary-container: #002022;
    --md-sys-color-tertiary: #7B1FA2;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #F3E5F5;
    --md-sys-color-on-tertiary-container: #2D0A3A;
    --md-sys-color-error: #D32F2F;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #FFDAD6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-success: #2E7D32;
    --md-sys-color-on-success: #FFFFFF;
    --md-sys-color-success-container: #C8E6C9;
    --md-sys-color-on-success-container: #002204;
    --md-sys-color-warning: #F57C00;
    --md-sys-color-on-warning: #FFFFFF;
    --md-sys-color-warning-container: #FFECB3;
    --md-sys-color-on-warning-container: #2E1800;
    --md-sys-color-surface: #F8FAFC;
    --md-sys-color-on-surface: #0F172A;
    --md-sys-color-surface-variant: #E2E8F0;
    --md-sys-color-on-surface-variant: #475569;
    --md-sys-color-surface-container: #F1F5F9;
    --md-sys-color-surface-container-high: #E2E8F0;
    --md-sys-color-surface-container-highest: #CBD5E1;
    --md-sys-color-background: #FFFFFF;
    --md-sys-color-on-background: #0F172A;
    --md-sys-color-outline: #94A3B8;
    --md-sys-color-outline-variant: #CBD5E1;
    --glow-primary: 0 0 20px rgba(21, 101, 192, 0.15);
    --glow-secondary: 0 0 20px rgba(0, 131, 143, 0.15);
    --glow-tertiary: 0 0 20px rgba(123, 31, 162, 0.15);
    --gradient-hero: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 50%, #F8FAFC 100%);
    --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
}