@import url('https://fonts.googleapis.com/css2?family=Carattere&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Fonts selection matching Danube brand */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-cursive: 'Carattere', cursive;

    /* Color Palette - Default Danube Dark Lavender & Blue Theme */
    --color-bg-dark: #0d0811;         /* Extreme Dark Violet-Plum */
    --color-bg-panel: #140e1b;        /* Dark Lavender Panel */
    --color-bg-card: #1f1826;         /* Elevated Dark Violet Card */
    --color-bg-card-hover: #2a2233;   /* Slightly elevated Violet Card */
    
    --color-primary: #915EA0;         /* Danube Brand Orchid Purple */
    --color-primary-dark: #764385;    /* Deep Orchid */
    --color-primary-light: #d2b7d9;   /* Soft Pastel Lavender */
    --color-accent: #2e78c8;          /* Danube Cursive Sky-Blue */
    --color-accent-hover: #4ea2ff;    
    --color-accent-dark: #1f5088;     
    
    /* Semantic Status Colors */
    --color-success: #66bb6a;         /* Match green */
    --color-warning: #ffca28;         /* Amber */
    --color-danger: #ef5350;          /* Strawberry red */
    --color-info: #29b6f6;            /* Sky blue */
    
    /* Text Colors */
    --color-text-primary: #fbf8fc;    
    --color-text-secondary: #cbbccb;  
    --color-text-muted: #8c7890;      
    --color-text-dark: #211227;       

    /* Login Variables (Dark Theme) */
    --color-bg-gradient-start: #1c0e25;
    --color-bg-gradient-end: #0c0811;
    --color-login-card-bg: rgba(20, 14, 25, 0.85);
    --color-login-card-border: rgba(145, 94, 160, 0.25);
    --color-input-bg: rgba(12, 8, 17, 0.7);
    --color-input-border: rgba(145, 94, 160, 0.35);
    --color-button-bg: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --color-button-hover-bg: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    --color-button-text: #ffffff;
    
    /* Elevations / Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    
    /* Border Radii */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-round: 50%;
    
    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing Grid */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    
    /* Layout Constants */
    --header-height: 70px;
}

/* Light Theme Variables Override (Matching Danube Coming Soon layout colors exactly) */
:root.light-theme {
    --color-bg-dark: #f9fafb;         /* Soft Pastel light grey */
    --color-bg-panel: #ffffff;        /* Pure White Panel */
    --color-bg-card: #ffffff;         /* Pure White Card */
    --color-bg-card-hover: #fcf9fc;   /* Light violet-grey tint */
    
    --color-primary: #915EA0;         /* Danube Brand Orchid Purple */
    --color-primary-dark: #764385;    
    --color-primary-light: #f3ecf5;   
    --color-accent: #2e78c8;          
    --color-accent-hover: #1f5088;    
    --color-accent-dark: #0e2949;     
    
    /* Semantic Status Colors (light mode contrast) */
    --color-success: #43a047;         
    --color-warning: #f57c00;         
    --color-danger: #d32f2f;          
    --color-info: #0288d1;            
    
    /* Text Colors */
    --color-text-primary: #4b5563;    /* Slate Grey (Coming Soon text) */
    --color-text-secondary: #6b7280;  /* Secondary Muted Grey */
    --color-text-muted: #9ca3af;      
    --color-text-dark: #ffffff;       

    /* Login Variables (Light Theme - exact match to Next.js card details) */
    --color-bg-gradient-start: #f9fafb;
    --color-bg-gradient-end: #f9fafb;
    --color-login-card-bg: #ffffff;
    --color-login-card-border: rgba(145, 94, 160, 0.15);
    --color-input-bg: #ffffff;
    --color-input-border: #e5e7eb;
    --color-button-bg: #915EA0;
    --color-button-hover-bg: #764385;
    --color-button-text: #ffffff;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 40px 100px -20px rgba(0, 0, 0, 0.15);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}