/* Material 3 (Material You) Theme
 * This file contains the Material Design 3 color system and theme variables
 */

/* Import Google Fonts for Material Design typography */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* 
   * Material 3 Base Color System - Default theme inspired by bluish Nord palette
   * Generated with Material Theme Builder: https://m3.material.io/theme-builder
   */

  /* Primary colors */
  --md-primary: #006eb5; /* Primary color */
  --md-on-primary: #ffffff; /* Text/icons on primary */
  --md-primary-container: #d0e5ff; /* Container with primary as background */
  --md-on-primary-container: #001c38; /* Text/icons on primary container */
  
  /* Secondary colors */
  --md-secondary: #536171; /* Secondary color */
  --md-on-secondary: #ffffff; /* Text/icons on secondary */
  --md-secondary-container: #d7e5f9; /* Container with secondary as background */
  --md-on-secondary-container: #0e1d2b; /* Text/icons on secondary container */
  
  /* Tertiary colors */
  --md-tertiary: #6f587a; /* Tertiary color */
  --md-on-tertiary: #ffffff; /* Text/icons on tertiary */
  --md-tertiary-container: #f8d8ff; /* Container with tertiary as background */
  --md-on-tertiary-container: #271631; /* Text/icons on tertiary container */

  /* Error colors */
  --md-error: #ba1a1a; /* Error color */
  --md-on-error: #ffffff; /* Text/icons on error */
  --md-error-container: #ffdad6; /* Container with error as background */
  --md-on-error-container: #410002; /* Text/icons on error container */

  /* Background colors */
  --md-background: #fcfcff; /* Main background */
  --md-on-background: #1a1c1e; /* Text/icons on background */
  
  /* Surface colors */
  --md-surface: #fcfcff; /* Surface background */
  --md-on-surface: #1a1c1e; /* Text/icons on surface */
  
  /* Surface variant colors */
  --md-surface-variant: #dee3eb; /* Surface variant background */
  --md-on-surface-variant: #42474e; /* Text/icons on surface variant */
  
  /* Outline colors */
  --md-outline: #72777f; /* Outlines */
  --md-outline-variant: #c2c7cf; /* Outline variants */

  /* Inverse colors */
  --md-inverse-surface: #2f3033; /* Inverse surface */
  --md-inverse-on-surface: #f1f0f4; /* Text/icons on inverse surface */
  --md-inverse-primary: #9acbff; /* Inverse primary */

  /* Neutral tonal surfaces (for elevation) */
  --md-surface-1: #f5f5f8; /* Surface with 1dp elevation */
  --md-surface-2: #f0f0f3; /* Surface with 2dp elevation */
  --md-surface-3: #eaebee; /* Surface with 3dp elevation */
  --md-surface-4: #e6e6e9; /* Surface with 4dp elevation */
  --md-surface-5: #e1e2e5; /* Surface with 5dp elevation */

  /* Shadow colors */
  --md-shadow: rgba(0, 0, 0, 0.14);
  --md-shadow-lightest: rgba(0, 0, 0, 0.05);

  /* Elevations (Box shadows according to Material Design spec) */
  --md-elevation-1: 0 1px 2px var(--md-shadow-lightest), 0 1px 3px 1px var(--md-shadow-lightest);
  --md-elevation-2: 0 1px 2px var(--md-shadow-lightest), 0 2px 6px 2px var(--md-shadow-lightest);
  --md-elevation-3: 0 4px 8px 3px var(--md-shadow-lightest), 0 1px 3px var(--md-shadow);
  --md-elevation-4: 0 6px 10px 4px var(--md-shadow-lightest), 0 2px 3px var(--md-shadow);
  --md-elevation-5: 0 8px 12px 6px var(--md-shadow-lightest), 0 4px 4px var(--md-shadow);

  /* Typography scale (px values) */
  --md-display-large-size: 57px;
  --md-display-medium-size: 45px;
  --md-display-small-size: 36px;
  
  --md-headline-large-size: 32px;
  --md-headline-medium-size: 28px;
  --md-headline-small-size: 24px;
  
  --md-title-large-size: 22px;
  --md-title-medium-size: 16px;
  --md-title-small-size: 14px;
  
  --md-body-large-size: 16px;
  --md-body-medium-size: 14px;
  --md-body-small-size: 12px;
  
  --md-label-large-size: 14px;
  --md-label-medium-size: 12px;
  --md-label-small-size: 11px;

  /* Font weights */
  --md-font-weight-light: 300;
  --md-font-weight-regular: 400;
  --md-font-weight-medium: 500;
  --md-font-weight-bold: 700;

  /* Border radius */
  --md-shape-small: 4px;
  --md-shape-medium: 8px;
  --md-shape-large: 16px;
  --md-shape-extra-large: 28px;
  --md-shape-full: 9999px;

  /* Transition timing */
  --md-transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-emphasized: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary colors */
    --md-primary: #9acbff; /* Dark theme primary */
    --md-on-primary: #00344e; /* Dark theme text/icons on primary */
    --md-primary-container: #004c74; /* Dark theme primary container */
    --md-on-primary-container: #d0e5ff; /* Dark theme text/icons on primary container */
    
    /* Secondary colors */
    --md-secondary: #bac9dc; /* Dark theme secondary */
    --md-on-secondary: #253141; /* Dark theme text/icons on secondary */
    --md-secondary-container: #3c4858; /* Dark theme secondary container */
    --md-on-secondary-container: #d7e5f9; /* Dark theme text/icons on secondary container */
    
    /* Tertiary colors */
    --md-tertiary: #dbbce4; /* Dark theme tertiary */
    --md-on-tertiary: #3d2946; /* Dark theme text/icons on tertiary */
    --md-tertiary-container: #56405f; /* Dark theme tertiary container */
    --md-on-tertiary-container: #f8d8ff; /* Dark theme text/icons on tertiary container */

    /* Error colors */
    --md-error: #ffb4ab; /* Dark theme error */
    --md-on-error: #690005; /* Dark theme text/icons on error */
    --md-error-container: #93000a; /* Dark theme error container */
    --md-on-error-container: #ffb4ab; /* Dark theme text/icons on error container */

    /* Background colors */
    --md-background: #1a1c1e; /* Dark theme main background */
    --md-on-background: #e2e2e6; /* Dark theme text/icons on background */
    
    /* Surface colors */
    --md-surface: #1a1c1e; /* Dark theme surface */
    --md-on-surface: #e2e2e6; /* Dark theme text/icons on surface */
    
    /* Surface variant colors */
    --md-surface-variant: #42474e; /* Dark theme surface variant */
    --md-on-surface-variant: #c2c7cf; /* Dark theme text/icons on surface variant */
    
    /* Outline colors */
    --md-outline: #8c9198; /* Dark theme outlines */
    --md-outline-variant: #42474e; /* Dark theme outline variants */

    /* Inverse colors */
    --md-inverse-surface: #e2e2e6; /* Dark theme inverse surface */
    --md-inverse-on-surface: #2f3033; /* Dark theme inverse on surface */
    --md-inverse-primary: #006eb5; /* Dark theme inverse primary */

    /* Neutral tonal surfaces (for elevation in dark mode) */
    --md-surface-1: #232528; /* Dark theme surface with 1dp */
    --md-surface-2: #282a2d; /* Dark theme surface with 2dp */
    --md-surface-3: #2d2f32; /* Dark theme surface with 3dp */
    --md-surface-4: #323438; /* Dark theme surface with 4dp */
    --md-surface-5: #37393d; /* Dark theme surface with 5dp */

    /* Shadow colors for dark theme */
    --md-shadow: rgba(0, 0, 0, 0.3);
    --md-shadow-lightest: rgba(0, 0, 0, 0.15);
  }
}

/* Force light theme with class (for user toggling) */
.theme-light {
  /* This resets to the default light theme defined in :root */
  /* Primary colors */
  --md-primary: #006eb5; /* Primary color */
  --md-on-primary: #ffffff; /* Text/icons on primary */
  --md-primary-container: #d0e5ff; /* Container with primary as background */
  --md-on-primary-container: #001c38; /* Text/icons on primary container */
  
  /* Secondary colors */
  --md-secondary: #536171; /* Secondary color */
  --md-on-secondary: #ffffff; /* Text/icons on secondary */
  --md-secondary-container: #d7e5f9; /* Container with secondary as background */
  --md-on-secondary-container: #0e1d2b; /* Text/icons on secondary container */
  
  /* Tertiary colors */
  --md-tertiary: #6f587a; /* Tertiary color */
  --md-on-tertiary: #ffffff; /* Text/icons on tertiary */
  --md-tertiary-container: #f8d8ff; /* Container with tertiary as background */
  --md-on-tertiary-container: #271631; /* Text/icons on tertiary container */

  /* Error colors */
  --md-error: #ba1a1a; /* Error color */
  --md-on-error: #ffffff; /* Text/icons on error */
  --md-error-container: #ffdad6; /* Container with error as background */
  --md-on-error-container: #410002; /* Text/icons on error container */

  /* Background colors */
  --md-background: #fcfcff; /* Main background */
  --md-on-background: #1a1c1e; /* Text/icons on background */
  
  /* Surface colors */
  --md-surface: #fcfcff; /* Surface background */
  --md-on-surface: #1a1c1e; /* Text/icons on surface */
  
  /* Surface variant colors */
  --md-surface-variant: #dee3eb; /* Surface variant background */
  --md-on-surface-variant: #42474e; /* Text/icons on surface variant */
  
  /* Outline colors */
  --md-outline: #72777f; /* Outlines */
  --md-outline-variant: #c2c7cf; /* Outline variants */

  /* Inverse colors */
  --md-inverse-surface: #2f3033; /* Inverse surface */
  --md-inverse-on-surface: #f1f0f4; /* Text/icons on inverse surface */
  --md-inverse-primary: #9acbff; /* Inverse primary */

  /* Neutral tonal surfaces (for elevation) */
  --md-surface-1: #f5f5f8; /* Surface with 1dp elevation */
  --md-surface-2: #f0f0f3; /* Surface with 2dp elevation */
  --md-surface-3: #eaebee; /* Surface with 3dp elevation */
  --md-surface-4: #e6e6e9; /* Surface with 4dp elevation */
  --md-surface-5: #e1e2e5; /* Surface with 5dp elevation */
}

/* Force dark theme with class (for user toggling) */
.theme-dark {
  /* Primary colors */
  --md-primary: #9acbff; /* Dark theme primary */
  --md-on-primary: #00344e; /* Dark theme text/icons on primary */
  --md-primary-container: #004c74; /* Dark theme primary container */
  --md-on-primary-container: #d0e5ff; /* Dark theme text/icons on primary container */
  
  /* Secondary colors */
  --md-secondary: #bac9dc; /* Dark theme secondary */
  --md-on-secondary: #253141; /* Dark theme text/icons on secondary */
  --md-secondary-container: #3c4858; /* Dark theme secondary container */
  --md-on-secondary-container: #d7e5f9; /* Dark theme text/icons on secondary container */
  
  /* Tertiary colors */
  --md-tertiary: #dbbce4; /* Dark theme tertiary */
  --md-on-tertiary: #3d2946; /* Dark theme text/icons on tertiary */
  --md-tertiary-container: #56405f; /* Dark theme tertiary container */
  --md-on-tertiary-container: #f8d8ff; /* Dark theme text/icons on tertiary container */

  /* Error colors */
  --md-error: #ffb4ab; /* Dark theme error */
  --md-on-error: #690005; /* Dark theme text/icons on error */
  --md-error-container: #93000a; /* Dark theme error container */
  --md-on-error-container: #ffb4ab; /* Dark theme text/icons on error container */

  /* Background colors */
  --md-background: #1a1c1e; /* Dark theme main background */
  --md-on-background: #e2e2e6; /* Dark theme text/icons on background */
  
  /* Surface colors */
  --md-surface: #1a1c1e; /* Dark theme surface */
  --md-on-surface: #e2e2e6; /* Dark theme text/icons on surface */
  
  /* Surface variant colors */
  --md-surface-variant: #42474e; /* Dark theme surface variant */
  --md-on-surface-variant: #c2c7cf; /* Dark theme text/icons on surface variant */
  
  /* Outline colors */
  --md-outline: #8c9198; /* Dark theme outlines */
  --md-outline-variant: #42474e; /* Dark theme outline variants */

  /* Inverse colors */
  --md-inverse-surface: #e2e2e6; /* Dark theme inverse surface */
  --md-inverse-on-surface: #2f3033; /* Dark theme inverse on surface */
  --md-inverse-primary: #006eb5; /* Dark theme inverse primary */

  /* Neutral tonal surfaces (for elevation in dark mode) */
  --md-surface-1: #232528; /* Dark theme surface with 1dp */
  --md-surface-2: #282a2d; /* Dark theme surface with 2dp */
  --md-surface-3: #2d2f32; /* Dark theme surface with 3dp */
  --md-surface-4: #323438; /* Dark theme surface with 4dp */
  --md-surface-5: #37393d; /* Dark theme surface with 5dp */
}

/* Dim theme - A middle ground between light and dark */
.theme-dim {
  /* Primary colors */
  --md-primary: #4d9bd8; /* Dim theme primary */
  --md-on-primary: #ffffff; /* Dim theme text/icons on primary */
  --md-primary-container: #a7d0f0; /* Dim theme primary container */
  --md-on-primary-container: #00263d; /* Dim theme text/icons on primary container */
  
  /* Secondary colors */
  --md-secondary: #6b7f95; /* Dim theme secondary */
  --md-on-secondary: #ffffff; /* Dim theme text/icons on secondary */
  --md-secondary-container: #9ba8b9; /* Dim theme secondary container */
  --md-on-secondary-container: #1a2430; /* Dim theme text/icons on secondary container */
  
  /* Tertiary colors */
  --md-tertiary: #8e7097; /* Dim theme tertiary */
  --md-on-tertiary: #ffffff; /* Dim theme text/icons on tertiary */
  --md-tertiary-container: #c5abcd; /* Dim theme tertiary container */
  --md-on-tertiary-container: #2f1d3b; /* Dim theme text/icons on tertiary container */

  /* Error colors */
  --md-error: #d4493e; /* Dim theme error */
  --md-on-error: #ffffff; /* Dim theme text/icons on error */
  --md-error-container: #efb0ab; /* Dim theme error container */
  --md-on-error-container: #560c04; /* Dim theme text/icons on error container */

  /* Background colors */
  --md-background: #2c3033; /* Dim theme main background */
  --md-on-background: #d9dadd; /* Dim theme text/icons on background */
  
  /* Surface colors */
  --md-surface: #2c3033; /* Dim theme surface */
  --md-on-surface: #d9dadd; /* Dim theme text/icons on surface */
  
  /* Surface variant colors */
  --md-surface-variant: #5e656e; /* Dim theme surface variant */
  --md-on-surface-variant: #c4c8d0; /* Dim theme text/icons on surface variant */
  
  /* Outline colors */
  --md-outline: #8d92a0; /* Dim theme outlines */
  --md-outline-variant: #5e656e; /* Dim theme outline variants */

  /* Inverse colors */
  --md-inverse-surface: #d9dadd; /* Dim theme inverse surface */
  --md-inverse-on-surface: #2c3033; /* Dim theme inverse on surface */
  --md-inverse-primary: #006eb5; /* Dim theme inverse primary */

  /* Neutral tonal surfaces (for elevation in dim mode) */
  --md-surface-1: #343639; /* Dim theme surface with 1dp */
  --md-surface-2: #3a3c40; /* Dim theme surface with 2dp */
  --md-surface-3: #404247; /* Dim theme surface with 3dp */
  --md-surface-4: #47494d; /* Dim theme surface with 4dp */
  --md-surface-5: #4d4f54; /* Dim theme surface with 5dp */
}

/* Typography classes */
.display-large {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-display-large-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.12;
  letter-spacing: -0.25px;
}

.display-medium {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-display-medium-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.15;
  letter-spacing: 0;
}

.display-small {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-display-small-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.22;
  letter-spacing: 0;
}

.headline-large {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-headline-large-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.25;
  letter-spacing: 0;
}

.headline-medium {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-headline-medium-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.29;
  letter-spacing: 0;
}

.headline-small {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-headline-small-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.33;
  letter-spacing: 0;
}

.title-large {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-title-large-size);
  font-weight: var(--md-font-weight-medium);
  line-height: 1.27;
  letter-spacing: 0;
}

.title-medium {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-title-medium-size);
  font-weight: var(--md-font-weight-medium);
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.title-small {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-title-small-size);
  font-weight: var(--md-font-weight-medium);
  line-height: 1.43;
  letter-spacing: 0.1px;
}

.body-large {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-body-large-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.body-medium {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-body-medium-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.43;
  letter-spacing: 0.25px;
}

.body-small {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-body-small-size);
  font-weight: var(--md-font-weight-regular);
  line-height: 1.33;
  letter-spacing: 0.4px;
}

.label-large {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-label-large-size);
  font-weight: var(--md-font-weight-medium);
  line-height: 1.43;
  letter-spacing: 0.1px;
}

.label-medium {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-label-medium-size);
  font-weight: var(--md-font-weight-medium);
  line-height: 1.33;
  letter-spacing: 0.5px;
}

.label-small {
  font-family: 'Roboto', sans-serif;
  font-size: var(--md-label-small-size);
  font-weight: var(--md-font-weight-medium);
  line-height: 1.45;
  letter-spacing: 0.5px;
}

/* Backward compatibility with Nord theme variables */
:root {
  /* Map Nord colors to Material Design colors for backward compatibility */
  --nord0: var(--md-surface);
  --nord1: var(--md-surface-1);
  --nord2: var(--md-surface-2);
  --nord3: var(--md-surface-3);
  --nord4: var(--md-on-surface-variant);
  --nord5: var(--md-on-surface);
  --nord6: var(--md-on-background);
  --nord7: var(--md-tertiary);
  --nord8: var(--md-primary);
  --nord9: var(--md-primary-container);
  --nord10: var(--md-secondary);
  --nord11: var(--md-error);
  --nord12: var(--md-error-container);
  --nord13: var(--md-tertiary-container);
  --nord14: var(--md-tertiary);
  --nord15: var(--md-tertiary-container);
}