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

:root {
    /* Fonts */
    --md-font-family: 'Outfit', sans-serif;

    /* Material Design 3 Light Palette Tokens */
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005D;
    
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1D192B;

    --md-sys-color-tertiary: #7D5260;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFD8E4;
    --md-sys-color-on-tertiary-container: #31111D;

    --md-sys-color-error: #B3261E;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;

    --md-sys-color-background: #FEF7FF;
    --md-sys-color-on-background: #1D1B20;
    
    --md-sys-color-surface: #F7F2FA;
    --md-sys-color-on-surface: #1D1B20;
    
    --md-sys-color-surface-variant: #E7E0EC;
    --md-sys-color-on-surface-variant: #49454F;
    
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #CAC4D0;

    /* M3 Elevations (Box Shadows) */
    --md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    --md-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    --md-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
    --md-elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
    
    /* M3 Shape Radii */
    --md-shape-corner-none: 0px;
    --md-shape-corner-extra-small: 4px;
    --md-shape-corner-small: 8px;
    --md-shape-corner-medium: 12px;
    --md-shape-corner-large: 16px;
    --md-shape-corner-extra-large: 28px;
    --md-shape-corner-full: 9999px;

    /* Transitions */
    --md-transition-duration: 0.25s;
    --md-transition-easing: cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   Dark Mode Tokens — Full Google M3 Dark Scheme
   Premium deep-indigo palette with layered surface tinting.
   ============================================================ */
[data-theme="dark"] {
    /* Primary */
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;

    /* Secondary */
    --md-sys-color-secondary: #CCC2DC;
    --md-sys-color-on-secondary: #332D41;
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;

    /* Tertiary */
    --md-sys-color-tertiary: #EFB8C8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633B48;
    --md-sys-color-on-tertiary-container: #FFD8E4;

    /* Error */
    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;

    /* Background — deep charcoal-blue base */
    --md-sys-color-background: #121016;
    --md-sys-color-on-background: #E6E0E9;

    /* Surface — layered tint elevation system
       surface = base panel, surface-variant = borders / dividers */
    --md-sys-color-surface: #1D1A22;
    --md-sys-color-on-surface: #E6E0E9;
    --md-sys-color-surface-variant: #322F37;
    --md-sys-color-on-surface-variant: #CAC4D0;

    /* Outline — borders, dividers, subtle icons */
    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;

    /* Elevation shadows — softer in dark mode */
    --md-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.45);
    --md-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.45);
    --md-elevation-3: 0 1px 3px 0 rgba(0, 0, 0, 0.45), 0 4px 8px 3px rgba(0, 0, 0, 0.30);
    --md-elevation-4: 0 2px 3px 0 rgba(0, 0, 0, 0.45), 0 6px 10px 4px rgba(0, 0, 0, 0.30);
}