// ==========================================================================
// CSS CUSTOM PROPERTIES MAPPING
// ==========================================================================
// Maps SCSS design tokens to CSS custom properties for runtime theming
// These variables can be dynamically updated via JavaScript
// ==========================================================================
@use 'colors' as colors;
@use 'glass' as glass;

:root {
  // ==========================================================================
  // PRIMARY COLORS - Material Design 3 Tonal Palette
  // ==========================================================================
  --color-primary-key: #{colors.$base-color-primary-key};
  --color-primary: #{colors.$base-color-primary};
  --color-on-primary: #{colors.$base-color-on-primary};
  --color-primary-container: #{colors.$base-color-primary-container};
  --color-on-primary-container: #{colors.$base-color-on-primary-container};
  --color-inverse-primary: #{colors.$base-color-inverse-primary};

  // ==========================================================================
  // SECONDARY COLORS - Material Design 3 Tonal Palette
  // ==========================================================================
  --color-secondary-key: #{colors.$base-color-secondary-key};
  --color-secondary: #{colors.$base-color-secondary};
  --color-on-secondary: #{colors.$base-color-on-secondary};
  --color-secondary-container: #{colors.$base-color-secondary-container};
  --color-on-secondary-container: #{colors.$base-color-on-secondary-container};

  // ==========================================================================
  // TERTIARY COLORS - Material Design 3 Tonal Palette
  // ==========================================================================
  --color-tertiary-key: #{colors.$base-color-tertiary-key};
  --color-tertiary: #{colors.$base-color-tertiary};
  --color-on-tertiary: #{colors.$base-color-on-tertiary};
  --color-tertiary-container: #{colors.$base-color-tertiary-container};
  --color-on-tertiary-container: #{colors.$base-color-on-tertiary-container};

  // ==========================================================================
  // QUATERNARY COLORS - Extended Material Design 3
  // ==========================================================================
  --color-quaternary-key: #{colors.$base-color-quaternary-key};

  // ==========================================================================
  // ERROR COLORS - Material Design 3 Error System
  // ==========================================================================
  --color-error-key: #{colors.$base-color-error-key};
  --color-error: #{colors.$base-color-error};
  --color-on-error: #{colors.$base-color-on-error};
  --color-error-container: #{colors.$base-color-error-container};
  --color-on-error-container: #{colors.$base-color-on-error-container};

  // ==========================================================================
  // NEUTRAL COLORS - Material Design 3 Neutral System
  // ==========================================================================
  --color-neutral-key: #{colors.$base-color-neutral-key};
  --color-neutral: #{colors.$base-color-neutral};
  --color-neutral-variant-key: #{colors.$base-color-neutral-variant-key};
  --color-neutral-variant: #{colors.$base-color-neutral-variant};

  // ==========================================================================
  // SURFACE COLORS - Material Design 3 Surface System
  // ==========================================================================
  --color-surface: #{colors.$base-color-surface};
  --color-surface-bright: #{colors.$base-color-surface-bright};
  --color-surface-dim: #{colors.$base-color-surface-dim};
  --color-on-surface: #{colors.$base-color-on-surface};
  --color-surface-lowest: #{colors.$base-color-surface-lowest};
  --color-surface-low: #{colors.$base-color-surface-low};
  --color-surface-container: #{colors.$base-color-surface-container};
  --color-surface-high: #{colors.$base-color-surface-high};
  --color-surface-highest: #{colors.$base-color-surface-highest};
  --color-surface-variant: #{colors.$base-color-surface-variant};
  --color-on-surface-variant: #{colors.$base-color-on-surface-variant};
  --color-inverse-surface: #{colors.$base-color-inverse-surface};
  --color-inverse-on-surface: #{colors.$base-color-inverse-on-surface};

  // ==========================================================================
  // BACKGROUND COLORS - Material Design 3 Background System
  // ==========================================================================
  --color-background: #{colors.$base-color-background};
  --color-on-background: #{colors.$base-color-on-background};

  // ==========================================================================
  // OUTLINE COLORS - Material Design 3 Outline System
  // ==========================================================================
  --color-outline: #{colors.$base-color-outline};
  --color-outline-variant: #{colors.$base-color-outline-variant};

  // ==========================================================================
  // UTILITY COLORS - Material Design 3 Utility Colors
  // ==========================================================================
  --color-shadow: #{colors.$base-color-shadow};
  --color-surface-tint: #{colors.$base-color-surface-tint};
  --color-scrim: #{colors.$base-color-scrim};

  // ==========================================================================
  // GLASS EFFECT VARIABLES - Default to Light Mode
  // ==========================================================================
  --glass-blur-xs: #{glass.$base-glass-blur-xs};
  --glass-blur-sm: #{glass.$base-glass-blur-sm};
  --glass-blur-md: #{glass.$base-glass-blur-md};
  --glass-blur-lg: #{glass.$base-glass-blur-lg};
  --glass-blur-xl: #{glass.$base-glass-blur-xl};
  --glass-blur-2xl: #{glass.$base-glass-blur-2xl};
  --glass-blur-3xl: #{glass.$base-glass-blur-3xl};

  --glass-opacity-translucent: #{glass.$base-glass-opacity-translucent-light};
  --glass-opacity-light: #{glass.$base-glass-opacity-light-light};
  --glass-opacity-medium: #{glass.$base-glass-opacity-medium-light};
  --glass-opacity-heavy: #{glass.$base-glass-opacity-heavy-light};
  --glass-opacity-frosted: #{glass.$base-glass-opacity-frosted-light};

  --glass-background-base: #{glass.$base-glass-bg-light};
  --glass-border-color: #{glass.$base-glass-border-light};
  --glass-shadow-color: #{glass.$base-glass-shadow-light};

  --glass-duration-fast: #{glass.$base-glass-duration-fast};
  --glass-duration-normal: #{glass.$base-glass-duration-normal};
  --glass-duration-slow: #{glass.$base-glass-duration-slow};
}

// ==========================================================================
// CSS VARIABLE FALLBACK SYSTEM
// ==========================================================================
// Fallback variables that use SCSS tokens when CSS variables are not supported
// This ensures compatibility with older browsers

// Primary system fallbacks
$css-color-primary: var(--color-primary, #{colors.$base-color-primary}) !default;
$css-color-on-primary: var(--color-on-primary, #{colors.$base-color-on-primary}) !default;
$css-color-primary-container: var(--color-primary-container, #{colors.$base-color-primary-container}) !default;
$css-color-on-primary-container: var(--color-on-primary-container, #{colors.$base-color-on-primary-container}) !default;
$css-color-inverse-primary: var(--color-inverse-primary, #{colors.$base-color-inverse-primary}) !default;

// Secondary system fallbacks
$css-color-secondary: var(--color-secondary, #{colors.$base-color-secondary}) !default;
$css-color-on-secondary: var(--color-on-secondary, #{colors.$base-color-on-secondary}) !default;
$css-color-secondary-container: var(--color-secondary-container, #{colors.$base-color-secondary-container}) !default;
$css-color-on-secondary-container: var(--color-on-secondary-container, #{colors.$base-color-on-secondary-container}) !default;

// Tertiary system fallbacks
$css-color-tertiary: var(--color-tertiary, #{colors.$base-color-tertiary}) !default;
$css-color-on-tertiary: var(--color-on-tertiary, #{colors.$base-color-on-tertiary}) !default;
$css-color-tertiary-container: var(--color-tertiary-container, #{colors.$base-color-tertiary-container}) !default;
$css-color-on-tertiary-container: var(--color-on-tertiary-container, #{colors.$base-color-on-tertiary-container}) !default;

// Error system fallbacks
$css-color-error: var(--color-error, #{colors.$base-color-error}) !default;
$css-color-on-error: var(--color-on-error, #{colors.$base-color-on-error}) !default;
$css-color-error-container: var(--color-error-container, #{colors.$base-color-error-container}) !default;
$css-color-on-error-container: var(--color-on-error-container, #{colors.$base-color-on-error-container}) !default;

// Surface system fallbacks
$css-color-surface: var(--color-surface, #{colors.$base-color-surface}) !default;
$css-color-surface-bright: var(--color-surface-bright, #{colors.$base-color-surface-bright}) !default;
$css-color-surface-dim: var(--color-surface-dim, #{colors.$base-color-surface-dim}) !default;
$css-color-on-surface: var(--color-on-surface, #{colors.$base-color-on-surface}) !default;
$css-color-surface-lowest: var(--color-surface-lowest, #{colors.$base-color-surface-lowest}) !default;
$css-color-surface-low: var(--color-surface-low, #{colors.$base-color-surface-low}) !default;
$css-color-surface-container: var(--color-surface-container, #{colors.$base-color-surface-container}) !default;
$css-color-surface-high: var(--color-surface-high, #{colors.$base-color-surface-high}) !default;
$css-color-surface-highest: var(--color-surface-highest, #{colors.$base-color-surface-highest}) !default;
$css-color-surface-variant: var(--color-surface-variant, #{colors.$base-color-surface-variant}) !default;
$css-color-on-surface-variant: var(--color-on-surface-variant, #{colors.$base-color-on-surface-variant}) !default;
$css-color-inverse-surface: var(--color-inverse-surface, #{colors.$base-color-inverse-surface}) !default;
$css-color-inverse-on-surface: var(--color-inverse-on-surface, #{colors.$base-color-inverse-on-surface}) !default;

// Background system fallbacks
$css-color-background: var(--color-background, #{colors.$base-color-background}) !default;
$css-color-on-background: var(--color-on-background, #{colors.$base-color-on-background}) !default;

// Outline system fallbacks
$css-color-outline: var(--color-outline, #{colors.$base-color-outline}) !default;
$css-color-outline-variant: var(--color-outline-variant, #{colors.$base-color-outline-variant}) !default;

// Utility fallbacks
$css-color-shadow: var(--color-shadow, #{colors.$base-color-shadow}) !default;
$css-color-surface-tint: var(--color-surface-tint, #{colors.$base-color-surface-tint}) !default;
$css-color-scrim: var(--color-scrim, #{colors.$base-color-scrim}) !default;

// Glass effect fallbacks
$css-glass-blur-xs: var(--glass-blur-xs, #{glass.$base-glass-blur-xs}) !default;
$css-glass-blur-sm: var(--glass-blur-sm, #{glass.$base-glass-blur-sm}) !default;
$css-glass-blur-md: var(--glass-blur-md, #{glass.$base-glass-blur-md}) !default;
$css-glass-blur-lg: var(--glass-blur-lg, #{glass.$base-glass-blur-lg}) !default;
$css-glass-blur-xl: var(--glass-blur-xl, #{glass.$base-glass-blur-xl}) !default;
$css-glass-blur-2xl: var(--glass-blur-2xl, #{glass.$base-glass-blur-2xl}) !default;
$css-glass-blur-3xl: var(--glass-blur-3xl, #{glass.$base-glass-blur-3xl}) !default;

$css-glass-opacity-translucent: var(--glass-opacity-translucent, #{glass.$base-glass-opacity-translucent-light}) !default;
$css-glass-opacity-light: var(--glass-opacity-light, #{glass.$base-glass-opacity-light-light}) !default;
$css-glass-opacity-medium: var(--glass-opacity-medium, #{glass.$base-glass-opacity-medium-light}) !default;
$css-glass-opacity-heavy: var(--glass-opacity-heavy, #{glass.$base-glass-opacity-heavy-light}) !default;
$css-glass-opacity-frosted: var(--glass-opacity-frosted, #{glass.$base-glass-opacity-frosted-light}) !default;

$css-glass-background-base: var(--glass-background-base, #{glass.$base-glass-bg-light}) !default;
$css-glass-border-color: var(--glass-border-color, #{glass.$base-glass-border-light}) !default;
$css-glass-shadow-color: var(--glass-shadow-color, #{glass.$base-glass-shadow-light}) !default;

// ==========================================================================
// RUNTIME THEMING MIXIN
// ==========================================================================
// Mixin for applying CSS custom properties to components
// Use this to make components theme-aware

@mixin theme-aware-colors($properties: ()) {
  @each $property, $css-variable in $properties {
    #{$property}: var(--color-#{$css-variable});
  }
}

// Example usage:
// .my-component {
//   @include theme-aware-colors((
//     'color': 'on-surface',
//     'background-color': 'surface',
//     'border-color': 'outline'
//   ));
// }