/* PickleWeather CSS Framework - Design Tokens */
/* Extracted from existing system and systematized for consistency */

:root {
  /* === COLOR SYSTEM === */
  
  /* Primary Brand Colors */
  --primary-50: #e3f2fd;
  --primary-100: #bbdefb;
  --primary-200: #90caf9;
  --primary-300: #64b5f6;
  --primary-400: #42a5f5;
  --primary-500: #2196F3; /* Main brand blue */
  --primary-600: #1e88e5;
  --primary-700: #1976d2;
  --primary-800: #1565c0;
  --primary-900: #0d47a1;
  
  /* Accent Colors */
  --accent-50: #fff3e0;
  --accent-100: #ffe0b2;
  --accent-200: #ffcc80;
  --accent-300: #ffb74d;
  --accent-400: #ffa726;
  --accent-500: #ff9800; /* Main accent orange */
  --accent-600: #fb8c00;
  --accent-700: #f57c00;
  --accent-800: #ef6c00;
  --accent-900: #e65100;
  
  /* Semantic Colors */
  --success-50: #e8f5e9;
  --success-100: #c8e6c9;
  --success-200: #a5d6a7;
  --success-300: #81c784;
  --success-400: #66bb6a;
  --success-500: #4caf50;
  --success-600: #43a047;
  --success-700: #388e3c;
  --success-800: #2e7d32;
  --success-900: #1b5e20;
  
  --warning-50: #fff3e0;
  --warning-100: #ffe0b2;
  --warning-200: #ffcc80;
  --warning-300: #ffb74d;
  --warning-400: #ffa726;
  --warning-500: #ff9800;
  --warning-600: #fb8c00;
  --warning-700: #f57c00;
  --warning-800: #ef6c00;
  --warning-900: #e65100;
  
  --error-50: #ffebee;
  --error-100: #ffcdd2;
  --error-200: #ef9a9a;
  --error-300: #e57373;
  --error-400: #ef5350;
  --error-500: #f44336;
  --error-600: #e53935;
  --error-700: #d32f2f;
  --error-800: #c62828;
  --error-900: #b71c1c;
  
  --info-50: #e3f2fd;
  --info-100: #bbdefb;
  --info-200: #90caf9;
  --info-300: #64b5f6;
  --info-400: #42a5f5;
  --info-500: #2196f3;
  --info-600: #1e88e5;
  --info-700: #1976d2;
  --info-800: #1565c0;
  --info-900: #0d47a1;
  
  /* Court surface accents (Drying Analyzer SVG) */
  --court-green-fill:   #EAF3DE;
  --court-green-stroke: #639922;

  /* Neutral Grays */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  
  /* === LIGHT THEME (Default) === */
  --bg-primary: var(--gray-100);
  --bg-secondary: #ffffff;
  --bg-tertiary: var(--gray-200);
  
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-disabled: #cccccc;
  
  --border-primary: #dddddd;
  --border-secondary: var(--gray-300);
  --border-focus: var(--primary-500);
  
  /* === SPACING SCALE === */
  --space-0: 0;
  --space-1: 4px;   /* 0.25rem */
  --space-2: 8px;   /* 0.5rem */
  --space-3: 12px;  /* 0.75rem */
  --space-4: 16px;  /* 1rem */
  --space-5: 20px;  /* 1.25rem */
  --space-6: 24px;  /* 1.5rem */
  --space-8: 32px;  /* 2rem */
  --space-10: 40px; /* 2.5rem */
  --space-12: 48px; /* 3rem */
  --space-16: 64px; /* 4rem */
  --space-20: 80px; /* 5rem */
  
  /* Component Specific Spacing */
  --container-padding: var(--space-4);
  --card-padding: var(--space-4);
  --button-padding-x: var(--space-4);
  --button-padding-y: var(--space-3);
  --grid-gap: var(--space-2);
  
  /* === TYPOGRAPHY SCALE === */
  --font-family-base: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  
  /* Font Sizes */
  --text-xs: 11px;    /* 0.6875rem */
  --text-sm: 12px;    /* 0.75rem */
  --text-base: 14px;  /* 0.875rem */
  --text-lg: 16px;    /* 1rem */
  --text-xl: 17px;    /* 1.0625rem */
  --text-2xl: 22px;   /* 1.375rem */
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.3;
  --leading-relaxed: 1.5;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  
  /* === ELEVATION SYSTEM === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* === BORDER RADIUS === */
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;
  
  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.2s ease-out;
  --transition-slow: 0.3s ease-out;
  
  /* === COMPONENT SIZES === */
  --container-max-width: 600px;
  --button-height-sm: 32px;
  --button-height-base: 40px;
  --button-height-lg: 48px;
  --input-height: 40px;
}

/* === DARK THEME OVERRIDES === */
[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2a2a2a;
  
  --text-primary: #e0e0e0;
  --text-secondary: #bbbbbb;
  --text-tertiary: #999999;
  --text-disabled: #666666;
  
  --border-primary: #333333;
  --border-secondary: #555555;
  
  /* Adjust semantic colors for dark theme */
  --success-bg: var(--success-900);
  --success-color: var(--success-300);
  
  --warning-bg: var(--warning-900);
  --warning-color: var(--warning-300);
  
  --error-bg: var(--error-900);
  --error-color: var(--error-300);
  
  --info-bg: var(--info-900);
  --info-color: var(--info-300);
}

/* === SEMANTIC COLOR UTILITIES === */
:root {
  /* Light theme semantic backgrounds and text */
  --success-bg: var(--success-50);
  --success-color: var(--success-800);
  
  --warning-bg: var(--warning-50);
  --warning-color: var(--warning-800);
  
  --error-bg: var(--error-50);
  --error-color: var(--error-800);
  
  --info-bg: var(--info-50);
  --info-color: var(--info-800);
}