/* variables.css — Design tokens (day theme default) */

:root {
  /* Beach colors — Day */
  --sky-top: #4A90D9;
  --sky-mid: #87CEEB;
  --sky-bottom: #B0E0E6;
  --sun-color: #FFD700;
  --sun-glow: rgba(255, 215, 0, 0.6);
  --cloud-color: rgba(255, 255, 255, 0.85);
  --ocean-top: #5BA4CF;
  --ocean-bottom: #3A7CA5;
  --sand-color: #F4D9A0;
  --sand-dark: #E8C878;
  --palm-trunk: #8B4513;
  --palm-frond: #228B22;
  --gull-color: #333;

  /* UI colors */
  --bg-primary: #FFF8DC;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --text-primary: #2C3E50;
  --text-secondary: #5A6A7E;
  --text-muted: #8B9DAF;
  --accent: #5B8DEF;
  --accent-glow: rgba(91, 141, 239, 0.4);
  --success: #E91E8C;
  --danger: #E74C3C;
  --warning: #F39C12;
  --info: #3498DB;

  /* Pixel font */
  --font-pixel: 'Press Start 2P', monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Icon pixel size (for pixel-art styling) */
  --pixel-unit: 2px;

  /* Timing */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-index layers */
  --z-beach: 0;
  --z-app: 10;
  --z-overlay: 20;
  --z-modal: 30;
  --z-toast: 40;
  --z-lightning: 50;

  /* Weather overlay */
  --overlay-color: transparent;
  --star-opacity: 0;
  --moon-opacity: 0;
  --cloud-opacity: 0.3;
  --wave-speed: 3s;
  --rain-opacity: 0;
}

/* Night theme */
[data-theme="night"] {
  --sky-top: #0D1B2A;
  --sky-mid: #1B2838;
  --sky-bottom: #2C3E50;
  --sun-color: #E8E8E8;
  --sun-glow: rgba(192, 192, 192, 0.3);
  --cloud-color: rgba(255, 255, 255, 0.15);
  --ocean-top: #1B3A5C;
  --ocean-bottom: #0F2440;
  --sand-color: #C4A882;
  --sand-dark: #A0896E;
  --palm-trunk: #5C4033;
  --palm-frond: #1B5E20;
  --gull-color: transparent;

  --bg-primary: #1A1D23;
  --bg-card: rgba(30, 35, 45, 0.92);
  --text-primary: #C8D6E5;
  --text-secondary: #8B9DAF;
  --text-muted: #5A6A7E;
  --accent: #FFD700;

  --star-opacity: 0.8;
  --moon-opacity: 1;
  --cloud-opacity: 0.05;
}