/**
 * Theme Variables and App-Specific Themes
 * Contains CSS custom properties for consistent theming across the application
 */

/* Global theme variables */
:root {

  /* Color system */
  --primary-color: #333;
  --secondary-color: #f5f5f3;
  --accent-color: #06c;
  
  /* Text colors */
  --text-primary: #333;
  --text-secondary: #4d4d4d;
  --text-muted: #767676;
  --text-inverse: #fff;
  
  /* Background colors */
  --bg-primary: #f5f5f3;
  --bg-secondary: #fff;
  --bg-tertiary: #fafafa;
  --bg-inverse: #333;
  
  /* Card styles */
  --card-bg: #fff;
  --card-border: rgb(0 0 0 / 12%);
  --card-shadow: rgb(0 0 0 / 12%);
  
  /* Border color */
  --border-color: rgb(0 0 0 / 12%);
  
  /* Button styles */
  --btn-primary-bg: #333;
  --btn-primary-text: #fff;
  --btn-secondary-bg: #f5f5f3;
  --btn-secondary-text: #333;
  
  /* Spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Typography */
  --font-primary: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
  --font-mono: "Courier New", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
  
  /* Border radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;
  
  /* State colors */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  
  /* Social colors */
  --color-x-primary: #1d9bf0;
  --color-x-hover: #1877f2;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* Z-index scale */
  --z-header: 100;
  --z-modal: 1000;
  --z-toast: 1100;
  
  /* Container query breakpoints */
  --container-sm: 320px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1440px;
}

/* App-specific theme overrides */
.app-coffee {
  --app-accent: #6b4423;
  --app-bg: #f5e6d3;
}

.app-tea {
  --app-accent: #4a7c59;
  --app-bg: #e8f5e9;
}

.app-disc {
  --app-accent: #1976d2;
  --app-bg: #e3f2fd;
}

.app-sunlight {
  --app-accent: #ffa726;
  --app-bg: #fff3e0;
}

.app-strong {
  --app-accent: #d32f2f;
  --app-bg: #ffebee;
}

.app-datacenter {
  --app-accent: #00897b;
  --app-bg: #e0f2f1;
}