/* CSS Variables for Theming */

/* ============================================
   THEME PACK: WINDOWS 11 (Fluent Design)
   ============================================ */
:root[data-theme="windows"] {
  --primary-color: #0078d4;
  --primary-dark: #005a9e;
  --primary-light: #50a8e8;
  --secondary-color: #0086f0;
  --accent-color: #8764b8;
  
  --background-color: #f3f3f3;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #f9f9f9;
  
  --text-primary: #1f1f1f;
  --text-secondary: #605e5c;
  --text-tertiary: #8a8886;
  
  --border-color: #e1dfdd;
  --border-radius: 4px;
  --border-radius-sm: 2px;
  --border-radius-lg: 8px;
  
  --shadow-sm: 0 0.3px 0.9px rgba(0,0,0,0.07), 0 1.6px 3.6px rgba(0,0,0,0.11);
  --shadow-md: 0 3.2px 7.2px rgba(0,0,0,0.13), 0 6.4px 14.4px rgba(0,0,0,0.11);
  --shadow-lg: 0 25.6px 57.6px rgba(0,0,0,0.22);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 32px;
  
  --btn-padding: 8px 16px;
  --input-padding: 10px 12px;
  
  --transition: all 0.15s cubic-bezier(0.38, 0, 0.24, 1);
}

:root[data-theme="windows"][data-mode="dark"] {
  --background-color: #202020;
  --surface-color: #2b2b2b;
  --surface-rgb: 43, 43, 43;
  --surface-hover: #363636;
  
  --text-primary: #ffffff;
  --text-secondary: #e1e1e1;
  --text-tertiary: #a3a3a3;
  
  --border-color: #464646;
  
  --shadow-sm: 0 0 8px rgba(0,0,0,0.54);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.54);
  --shadow-lg: 0 25.6px 57.6px rgba(0,0,0,0.70);
}

/* ============================================
   THEME PACK: iOS (Apple Design Language)
   ============================================ */
:root[data-theme="ios"],
:root {
  --primary-color: #007aff;
  --primary-dark: #0051d5;
  --primary-light: #5ab4ff;
  --secondary-color: #5856d6;
  --accent-color: #ff2d55;
  
  --background-color: #f2f2f7;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #f8f8f9;
  
  --text-primary: #000000;
  --text-secondary: #3c3c43;
  --text-tertiary: #8e8e93;
  
  --border-color: #c6c6c8;
  --border-radius: 10px;
  --border-radius-sm: 6px;
  --border-radius-lg: 14px;
  
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --btn-padding: 10px 20px;
  --input-padding: 11px 16px;
  
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

:root[data-theme="ios"][data-mode="dark"],
:root[data-mode="dark"] {
  --background-color: #000000;
  --surface-color: #1c1c1e;
  --surface-rgb: 28, 28, 30;
  --surface-hover: #2c2c2e;
  
  --text-primary: #ffffff;
  --text-secondary: #aeaeb2;
  --text-tertiary: #636366;
  
  --border-color: #38383a;
  
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.36);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.48);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.58);
}

/* ============================================
   THEME PACK: ANDROID (Material Design 3)
   ============================================ */
:root[data-theme="android"] {
  --primary-color: #6750a4;
  --primary-dark: #4f378b;
  --primary-light: #d0bcff;
  --secondary-color: #625b71;
  --accent-color: #7d5260;
  
  --background-color: #fffbfe;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #f7f2fa;
  
  --text-primary: #1c1b1f;
  --text-secondary: #49454f;
  --text-tertiary: #79747e;
  
  --border-color: #c4c7c5;
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 28px;
  
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md: 0 1px 3px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 6px 10px rgba(0,0,0,0.3), 0 1px 18px rgba(0,0,0,0.15);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --btn-padding: 10px 24px;
  --input-padding: 16px 16px;
  
  --transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="android"][data-mode="dark"] {
  --background-color: #1c1b1f;
  --surface-color: #141218;
  --surface-rgb: 20, 18, 24;
  --surface-hover: #241f2c;
  
  --text-primary: #e6e1e5;
  --text-secondary: #cac4d0;
  --text-tertiary: #938f99;
  
  --border-color: #444746;
  
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.7);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.8);
}

/* ============================================
   THEME PACK: COMIC (Playful & Bold)
   ============================================ */
:root[data-theme="comic"] {
  --primary-color: #ff6b35;
  --primary-dark: #e64a19;
  --primary-light: #ff9e66;
  --secondary-color: #f7b731;
  --accent-color: #5f27cd;
  
  --background-color: #fff9e6;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #fff4cc;
  
  --text-primary: #2d3436;
  --text-secondary: #636e72;
  --text-tertiary: #95a5a6;
  
  --border-color: #ffd93d;
  --border-radius: 20px;
  --border-radius-sm: 12px;
  --border-radius-lg: 30px;
  
  --shadow-sm: 3px 3px 0 rgba(0,0,0,0.2);
  --shadow-md: 5px 5px 0 rgba(0,0,0,0.25);
  --shadow-lg: 8px 8px 0 rgba(0,0,0,0.3);
  
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 18px;
  --spacing-lg: 28px;
  --spacing-xl: 40px;
  
  --btn-padding: 12px 28px;
  --input-padding: 14px 20px;
  
  --transition: all 0.1s ease-out;
}

:root[data-theme="comic"][data-mode="dark"] {
  --background-color: #2d3436;
  --surface-color: #34495e;
  --surface-rgb: 52, 73, 94;
  --surface-hover: #475569;
  
  --text-primary: #ecf0f1;
  --text-secondary: #bdc3c7;
  --text-tertiary: #7f8c8d;
  
  --border-color: #f39c12;
  
  --shadow-sm: 3px 3px 0 rgba(0,0,0,0.5);
  --shadow-md: 5px 5px 0 rgba(0,0,0,0.6);
  --shadow-lg: 8px 8px 0 rgba(0,0,0,0.7);
}

/* ============================================
   THEME PACK: MIDNIGHT (Deep Dark Blues)
   ============================================ */
:root[data-theme="midnight"] {
  --primary-color: #4a90e2;
  --primary-dark: #2171d8;
  --primary-light: #7bb0f0;
  --secondary-color: #9b59b6;
  --accent-color: #1abc9c;
  
  --background-color: #e8eef5;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #f4f7fa;
  
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-tertiary: #718096;
  
  --border-color: #cbd5e0;
  --border-radius: 8px;
  --border-radius-sm: 6px;
  --border-radius-lg: 12px;
  
  --shadow-sm: 0 2px 8px rgba(26,32,44,0.08);
  --shadow-md: 0 4px 16px rgba(26,32,44,0.12);
  --shadow-lg: 0 12px 40px rgba(26,32,44,0.18);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --btn-padding: 10px 20px;
  --input-padding: 12px 16px;
  
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="midnight"][data-mode="dark"] {
  --background-color: #0f1419;
  --surface-color: #1a1f2e;
  --surface-rgb: 26, 31, 46;
  --surface-hover: #242b3d;
  
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-tertiary: #718096;
  
  --border-color: #2d3748;
  
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.8);
}

/* ============================================
   THEME PACK: SUNRISE (Warm Golden Hour)
   ============================================ */
:root[data-theme="sunrise"] {
  --primary-color: #ff6b6b;
  --primary-dark: #ee5a52;
  --primary-light: #ff8787;
  --secondary-color: #feca57;
  --accent-color: #ff9ff3;
  
  --background-color: #fff5f0;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #ffe8df;
  
  --text-primary: #3d2014;
  --text-secondary: #8b5a3c;
  --text-tertiary: #b08968;
  
  --border-color: #ffe4d6;
  --border-radius: 16px;
  --border-radius-sm: 10px;
  --border-radius-lg: 24px;
  
  --shadow-sm: 0 2px 8px rgba(255,107,107,0.1);
  --shadow-md: 0 8px 24px rgba(255,107,107,0.15);
  --shadow-lg: 0 16px 48px rgba(255,107,107,0.2);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --btn-padding: 12px 24px;
  --input-padding: 14px 18px;
  
  --transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="sunrise"][data-mode="dark"] {
  --background-color: #1f1210;
  --surface-color: #2d1f1c;
  --surface-rgb: 45, 31, 28;
  --surface-hover: #3d2b26;
  
  --text-primary: #ffe4d6;
  --text-secondary: #d4a595;
  --text-tertiary: #a8776b;
  
  --border-color: #4a342e;
  
  --shadow-sm: 0 2px 12px rgba(255,107,107,0.25);
  --shadow-md: 0 8px 32px rgba(255,107,107,0.35);
  --shadow-lg: 0 16px 56px rgba(255,107,107,0.45);
}

/* ============================================
   THEME PACK: JUNGLE GREEN (Rich Nature)
   ============================================ */
:root[data-theme="jungle"] {
  --primary-color: #27ae60;
  --primary-dark: #229954;
  --primary-light: #52be80;
  --secondary-color: #16a085;
  --accent-color: #f39c12;
  
  --background-color: #f0f8f4;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #e8f5f0;
  
  --text-primary: #1e4620;
  --text-secondary: #2e7d32;
  --text-tertiary: #66bb6a;
  
  --border-color: #a5d6a7;
  --border-radius: 14px;
  --border-radius-sm: 8px;
  --border-radius-lg: 20px;
  
  --shadow-sm: 0 2px 6px rgba(39,174,96,0.12);
  --shadow-md: 0 6px 18px rgba(39,174,96,0.16);
  --shadow-lg: 0 12px 36px rgba(39,174,96,0.22);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --btn-padding: 11px 22px;
  --input-padding: 13px 17px;
  
  --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

:root[data-theme="jungle"][data-mode="dark"] {
  --background-color: #0d1f12;
  --surface-color: #1a2f1f;
  --surface-rgb: 26, 47, 31;
  --surface-hover: #263f2e;
  
  --text-primary: #a5d6a7;
  --text-secondary: #81c784;
  --text-tertiary: #66bb6a;
  
  --border-color: #2e5938;
  
  --shadow-sm: 0 2px 8px rgba(39,174,96,0.3);
  --shadow-md: 0 6px 20px rgba(39,174,96,0.4);
  --shadow-lg: 0 12px 40px rgba(39,174,96,0.5);
}

/* ============================================
   THEME PACK: AQUATIC (Ocean Depths)
   ============================================ */
:root[data-theme="aquatic"] {
  --primary-color: #00acc1;
  --primary-dark: #00838f;
  --primary-light: #4dd0e1;
  --secondary-color: #0277bd;
  --accent-color: #7c4dff;
  
  --background-color: #e0f7fa;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #b2ebf2;
  
  --text-primary: #004d56;
  --text-secondary: #006064;
  --text-tertiary: #00838f;
  
  --border-color: #80deea;
  --border-radius: 18px;
  --border-radius-sm: 12px;
  --border-radius-lg: 26px;
  
  --shadow-sm: 0 3px 10px rgba(0,172,193,0.15);
  --shadow-md: 0 6px 20px rgba(0,172,193,0.2);
  --shadow-lg: 0 12px 40px rgba(0,172,193,0.28);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --btn-padding: 11px 24px;
  --input-padding: 13px 18px;
  
  --transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

:root[data-theme="aquatic"][data-mode="dark"] {
  --background-color: #001f24;
  --surface-color: #00363d;
  --surface-rgb: 0, 54, 61;
  --surface-hover: #004d56;
  
  --text-primary: #b2ebf2;
  --text-secondary: #80deea;
  --text-tertiary: #4dd0e1;
  
  --border-color: #006064;
  
  --shadow-sm: 0 4px 12px rgba(0,172,193,0.35);
  --shadow-md: 0 8px 24px rgba(0,172,193,0.45);
  --shadow-lg: 0 16px 48px rgba(0,172,193,0.55);
}

/* ============================================
   THEME PACK: CYBERPUNK (Neon Dreams)
   ============================================ */
:root[data-theme="cyberpunk"] {
  --primary-color: #ff0080;
  --primary-dark: #cc0066;
  --primary-light: #ff4da6;
  --secondary-color: #00ffff;
  --accent-color: #8b00ff;
  
  --background-color: #f5f0ff;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #ede0ff;
  
  --text-primary: #1a0033;
  --text-secondary: #4d0099;
  --text-tertiary: #8000ff;
  
  --border-color: #d580ff;
  --border-radius: 2px;
  --border-radius-sm: 0px;
  --border-radius-lg: 4px;
  
  --shadow-sm: 0 0 10px rgba(255,0,128,0.3), 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 0 20px rgba(255,0,128,0.4), 0 4px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 0 40px rgba(255,0,128,0.6), 0 8px 16px rgba(0,0,0,0.2);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --btn-padding: 10px 20px;
  --input-padding: 12px 16px;
  
  --transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

:root[data-theme="cyberpunk"][data-mode="dark"] {
  --background-color: #0a0014;
  --surface-color: #1a0033;
  --surface-rgb: 26, 0, 51;
  --surface-hover: #2d0059;
  
  --text-primary: #ff00ff;
  --text-secondary: #d580ff;
  --text-tertiary: #b366ff;
  
  --border-color: #4d0099;
  
  --shadow-sm: 0 0 15px rgba(255,0,255,0.5);
  --shadow-md: 0 0 30px rgba(255,0,255,0.6), 0 0 15px rgba(0,255,255,0.3);
  --shadow-lg: 0 0 50px rgba(255,0,255,0.8), 0 0 25px rgba(0,255,255,0.5);
}

/* ============================================
   THEME PACK: RETRO 80s (Nostalgic Vibes)
   ============================================ */
:root[data-theme="retro"] {
  --primary-color: #ff6b9d;
  --primary-dark: #d4145a;
  --primary-light: #ffb3d9;
  --secondary-color: #00d4ff;
  --accent-color: #ffd93d;
  
  --background-color: #fff0f5;
  --surface-color: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-hover: #ffe4ec;
  
  --text-primary: #2d1b2e;
  --text-secondary: #5c3d5e;
  --text-tertiary: #8b5f8d;
  
  --border-color: #ffb3d9;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 16px;
  
  --shadow-sm: 4px 4px 0 rgba(255,107,157,0.3);
  --shadow-md: 6px 6px 0 rgba(255,107,157,0.4);
  --shadow-lg: 10px 10px 0 rgba(255,107,157,0.5);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --btn-padding: 12px 24px;
  --input-padding: 12px 16px;
  
  --transition: all 0.12s ease-in-out;
}

:root[data-theme="retro"][data-mode="dark"] {
  --background-color: #1a0f1f;
  --surface-color: #2d1b2e;
  --surface-rgb: 45, 27, 46;
  --surface-hover: #3d2b3e;
  
  --text-primary: #ffb3d9;
  --text-secondary: #ff6b9d;
  --text-tertiary: #d4145a;
  
  --border-color: #5c3d5e;
  
  --shadow-sm: 4px 4px 0 rgba(255,107,157,0.5);
  --shadow-md: 6px 6px 0 rgba(255,107,157,0.6);
  --shadow-lg: 10px 10px 0 rgba(255,107,157,0.8);
}


:root[data-theme="tesla"] {
  /* Core Tesla-inspired palette */
  --primary-color: #cc0000;           /* Tesla signature red (bold energy) */
  --primary-dark: #a30000;            /* Deeper red for hover/active states */
  --primary-light: #ff3333;           /* Lighter red for accents */

  --secondary-color: #1a1a1a;         /* Deep near-black for structure */
  --accent-color: #00d4ff;            /* Electric cyan/blue accent (futuristic/tech glow) */

  /* Backgrounds & Surfaces (clean, premium feel) */
  --background-color: #f8f8f8;        /* Light off-white / minimalist base */
  --surface-color: #ffffff;           /* Pure white cards/panels */
  --surface-rgb: 255, 255, 255;
  --surface-hover: #f0f0f0;           /* Subtle hover lift */

  /* Text hierarchy */
  --text-primary: #111111;            /* Near-black for maximum readability */
  --text-secondary: #555555;
  --text-tertiary: #888888;

  /* Borders & Radius (angular but refined) */
  --border-color: #cccccc;            /* Subtle metallic gray borders */
  --border-radius: 8px;               /* Slightly angular (less rounded than comic) */
  --border-radius-sm: 4px;
  --border-radius-lg: 16px;

  /* Shadows (Cybertruck-inspired hard, geometric drop shadows) */
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.08), 2px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12), 4px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.15), 6px 6px 0 rgba(0, 0, 0, 0.1);

  /* Spacing (generous, airy like Tesla interfaces) */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;

  /* Interactive elements */
  --btn-padding: 14px 32px;
  --input-padding: 16px 24px;

  /* Transitions (snappy, premium feel) */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Slightly smoother than comic */

  /* Bonus Tesla touches */
  --font-family-heading: "TeslaGothic", system-ui, -apple-system, sans-serif; /* Use Tesla's custom font if available, fallback to system */
  --font-family-body: system-ui, -apple-system, sans-serif;
}

:root[data-theme="tesla"][data-mode="dark"] {
  /* Dark mode: Deep, immersive Cybertruck/exoskeleton vibe */
  --background-color: #0a0a0a;        /* Near-void black */
  --surface-color: #111111;           /* Dark metallic panels */
  --surface-rgb: 17, 17, 17;
  --surface-hover: #1a1a1a;

  --text-primary: #eeeeee;            /* Bright white text */
  --text-secondary: #bbbbbb;
  --text-tertiary: #777777;

  --border-color: #333333;            /* Subtle dark metallic borders */

  /* Stronger shadows in dark mode for depth */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4), 2px 2px 0 rgba(204, 0, 0, 0.1);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5), 4px 4px 0 rgba(204, 0, 0, 0.15);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.6), 6px 6px 0 rgba(0, 212, 255, 0.1);

  --accent-color: #00f0ff;            /* Brighter cyan glow in dark mode */
}


/* ============================================
   BASE STYLES RESET
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  background-color: var(--background-color);
  color: var(--text-primary);
  line-height: 1.6;
  transition: var(--transition);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Remove default button styles */
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* Remove default input styles */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-dark);
}