/**
 * Watchmi Material Design 3 (M3) Design Tokens & CSS Variables
 * Expressive Dark/Light Mode Theme System
 */

:root {
  /* Font Family */
  --md-sys-typescale-body-font: 'Plus Jakarta Sans', 'Roboto', system-ui, -apple-system, sans-serif;
  
  /* Brand Accent */
  --md-sys-color-brand-red: #FF0033;
  --md-sys-color-brand-gradient: linear-gradient(135deg, #FF0033 0%, #E60000 50%, #B30000 100%);
  
  /* Shared Radius Tokens */
  --md-shape-corner-xs: 4px;
  --md-shape-corner-sm: 8px;
  --md-shape-corner-md: 12px;
  --md-shape-corner-lg: 16px;
  --md-shape-corner-xl: 28px;
  --md-shape-corner-full: 9999px;
  
  /* Shared Motion & Transitions */
  --md-transition-standard: 250ms cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-transition-emphasized: 400ms cubic-bezier(0.2, 0.0, 0, 1.0);
  
  /* Safe Area Inset Fallbacks */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Light Theme Variables */
[data-theme="light"] {
  --md-sys-color-background: #F9FAFB;
  --md-sys-color-on-background: #0F172A;
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-surface-dim: #F1F5F9;
  --md-sys-color-surface-container: #F8FAFC;
  --md-sys-color-surface-container-high: #E2E8F0;
  --md-sys-color-on-surface: #0F172A;
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-outline: #CBD5E1;
  --md-sys-color-outline-variant: #E2E8F0;
  
  --md-sys-color-primary: #FF0033;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFE5E8;
  --md-sys-color-on-primary-container: #660014;
  
  --md-sys-color-secondary: #0284C7;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E0F2FE;
  
  --md-sys-color-card-border: rgba(0, 0, 0, 0.06);
  --md-sys-color-glass: rgba(255, 255, 255, 0.85);
  --md-sys-shadow-1: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
  --md-sys-shadow-2: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --md-sys-shadow-3: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

/* Dark Theme Variables (System Preference or Explicit Dark Mode) */
[data-theme="dark"] {
  --md-sys-color-background: #0F0F0F;
  --md-sys-color-on-background: #F1F1F1;
  --md-sys-color-surface: #0F0F0F;
  --md-sys-color-surface-dim: #212121;
  --md-sys-color-surface-container: #1F1F1F;
  --md-sys-color-surface-container-high: #272727;
  --md-sys-color-on-surface: #F1F1F1;
  --md-sys-color-on-surface-variant: #AAAAAA;
  --md-sys-color-outline: #3F3F3F;
  --md-sys-color-outline-variant: #272727;
  
  --md-sys-color-primary: #FF0033;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #3F000B;
  --md-sys-color-on-primary-container: #FFD1D9;
  
  --md-sys-color-secondary: #38BDF8;
  --md-sys-color-on-secondary: #0F172A;
  --md-sys-color-secondary-container: #0369A1;
  
  --md-sys-color-card-border: rgba(255, 255, 255, 0.08);
  --md-sys-color-glass: rgba(15, 15, 15, 0.85);
  --md-sys-shadow-1: 0 1px 3px rgba(0,0,0,0.5);
  --md-sys-shadow-2: 0 4px 6px -1px rgba(0,0,0,0.6);
  --md-sys-shadow-3: 0 10px 15px -3px rgba(0,0,0,0.7);
}

/* Auto Dark Theme via System Preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-background: #0F0F0F;
    --md-sys-color-on-background: #F1F1F1;
    --md-sys-color-surface: #0F0F0F;
    --md-sys-color-surface-dim: #212121;
    --md-sys-color-surface-container: #1F1F1F;
    --md-sys-color-surface-container-high: #272727;
    --md-sys-color-on-surface: #F1F1F1;
    --md-sys-color-on-surface-variant: #AAAAAA;
    --md-sys-color-outline: #3F3F3F;
    --md-sys-color-outline-variant: #272727;
    
    --md-sys-color-primary: #FF0033;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #3F000B;
    --md-sys-color-on-primary-container: #FFD1D9;
    
    --md-sys-color-secondary: #38BDF8;
    --md-sys-color-on-secondary: #0F172A;
    --md-sys-color-secondary-container: #0369A1;
    
    --md-sys-color-card-border: rgba(255, 255, 255, 0.08);
    --md-sys-color-glass: rgba(15, 15, 15, 0.85);
    --md-sys-shadow-1: 0 1px 3px rgba(0,0,0,0.5);
    --md-sys-shadow-2: 0 4px 6px -1px rgba(0,0,0,0.6);
    --md-sys-shadow-3: 0 10px 15px -3px rgba(0,0,0,0.7);
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --md-sys-color-background: #F9FAFB;
    --md-sys-color-on-background: #0F172A;
    --md-sys-color-surface: #FFFFFF;
    --md-sys-color-surface-dim: #F1F5F9;
    --md-sys-color-surface-container: #F8FAFC;
    --md-sys-color-surface-container-high: #E2E8F0;
    --md-sys-color-on-surface: #0F172A;
    --md-sys-color-on-surface-variant: #475569;
    --md-sys-color-outline: #CBD5E1;
    --md-sys-color-outline-variant: #E2E8F0;
    
    --md-sys-color-primary: #FF0033;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #FFE5E8;
    --md-sys-color-on-primary-container: #660014;
    
    --md-sys-color-secondary: #0284C7;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E0F2FE;
    
    --md-sys-color-card-border: rgba(0, 0, 0, 0.06);
    --md-sys-color-glass: rgba(255, 255, 255, 0.85);
    --md-sys-shadow-1: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
    --md-sys-shadow-2: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --md-sys-shadow-3: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  }
}