/*
 * Timerist Theme System
 * Supports: Style 1 (dark), Style 2, Style 3 (default)
 * Timer pages use rgb(var(--background)) format - values are space-separated RGB triplets.
 */

/* ============================================
   Default (Light) - rgb() format for timers
   ============================================ */
:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Courier New', ui-monospace, monospace;
  --font-size-header: clamp(1rem, 3vw, 1.25rem);
  --font-weight-header: 600;

  --background: 245 247 250;
  --foreground: 51 51 51;
  --card: 255 255 255;
  --card-foreground: 51 51 51;
  --popover: 255 255 255;
  --popover-foreground: 51 51 51;
  --primary: 74 144 226;
  --primary-foreground: 255 255 255;
  --secondary: 80 200 120;
  --secondary-foreground: 255 255 255;
  --muted: 102 102 102;
  --muted-foreground: 153 153 153;
  --accent: 225 232 237;
  --accent-foreground: 51 51 51;
  --destructive: 231 76 60;
  --destructive-foreground: 255 255 255;
  --border: 225 232 237;
  --input: 225 232 237;
  --ring: 74 144 226;
  --radius: 0.5rem;
}

/* ============================================
   STYLE 1 (Dark Mode)
   ============================================ */
[data-theme="style1"] {
  --background: 0 0 0;
  --foreground: 255 255 255;
  --card: 26 26 26;
  --card-foreground: 255 255 255;
  --popover: 26 26 26;
  --popover-foreground: 255 255 255;
  --primary: 255 0 0;
  --primary-foreground: 255 255 255;
  --secondary: 0 255 0;
  --secondary-foreground: 0 0 0;
  --muted: 204 204 204;
  --muted-foreground: 153 153 153;
  --accent: 51 51 51;
  --accent-foreground: 255 255 255;
  --destructive: 255 0 0;
  --destructive-foreground: 255 255 255;
  --border: 51 51 51;
  --input: 51 51 51;
  --ring: 255 0 0;
}

/* ============================================
   STYLE 2 (Placeholder)
   ============================================ */
[data-theme="style2"] {
  --background: 245 247 250;
  --foreground: 51 51 51;
  --card: 255 255 255;
  --card-foreground: 51 51 51;
  --popover: 255 255 255;
  --popover-foreground: 51 51 51;
  --primary: 74 144 226;
  --primary-foreground: 255 255 255;
  --secondary: 80 200 120;
  --secondary-foreground: 255 255 255;
  --muted: 102 102 102;
  --muted-foreground: 153 153 153;
  --accent: 225 232 237;
  --accent-foreground: 51 51 51;
  --destructive: 231 76 60;
  --destructive-foreground: 255 255 255;
  --border: 225 232 237;
  --input: 225 232 237;
  --ring: 74 144 226;
}

/* ============================================
   STYLE 3 (Current design - same as default)
   ============================================ */
[data-theme="style3"] {
  --background: 245 247 250;
  --foreground: 51 51 51;
  --card: 255 255 255;
  --card-foreground: 51 51 51;
  --popover: 255 255 255;
  --popover-foreground: 51 51 51;
  --primary: 74 144 226;
  --primary-foreground: 255 255 255;
  --secondary: 80 200 120;
  --secondary-foreground: 255 255 255;
  --muted: 102 102 102;
  --muted-foreground: 153 153 153;
  --accent: 225 232 237;
  --accent-foreground: 51 51 51;
  --destructive: 231 76 60;
  --destructive-foreground: 255 255 255;
  --border: 225 232 237;
  --input: 225 232 237;
  --ring: 74 144 226;
}