/* =====================================================
   MODERN FLIP CLOCK – CSS VARIABLES / DESIGN TOKENS
   ===================================================== */

:root {
  /* ---- Color Palettes ---- */
  --clr-bg-primary:   #0d0d14;
  --clr-bg-secondary: #13131f;
  --clr-bg-card:      rgba(20, 20, 36, 0.85);
  --clr-bg-glass:     rgba(255,255,255,0.06);
  --clr-border:       rgba(255,255,255,0.10);
  --clr-border-glow:  rgba(99,102,241,0.35);

  --clr-accent:       #6366f1;
  --clr-accent-2:     #8b5cf6;
  --clr-accent-3:     #06b6d4;
  --clr-accent-neon:  #00fff5;
  --clr-accent-warm:  #f59e0b;
  --clr-danger:       #ef4444;
  --clr-success:      #10b981;
  --clr-warning:      #f59e0b;

  --clr-text-primary:   #ffffff;
  --clr-text-secondary: rgba(255,255,255,0.65);
  --clr-text-muted:     rgba(255,255,255,0.38);

  /* ---- Flip Card Colors ---- */
  --flip-bg:          #1a1a2e;
  --flip-bg-alt:      #16213e;
  --flip-text:        #ffffff;
  --flip-shadow:      rgba(0,0,0,0.7);
  --flip-highlight:   rgba(255,255,255,0.08);
  --flip-border:      rgba(255,255,255,0.06);
  --flip-separator-color: var(--clr-accent);
  --flip-glow-color:  rgba(99,102,241,0.4);

  /* ---- Typography ---- */
  --font-clock:   'Orbitron', monospace;
  --font-ui:      'Inter', sans-serif;
  --font-mono:    'Roboto Mono', monospace;
  --font-hacker:  'Share Tech Mono', monospace;
  --font-display: 'Rajdhani', sans-serif;

  /* ---- Flip Animation ---- */
  --flip-speed:       0.55s;
  --flip-mode:        ease;    /* smooth */

  /* ---- Digit Size (responsive via clamp) ---- */
  --digit-size:       clamp(3.5rem, 10vw, 9rem);
  --digit-width:      clamp(2.8rem, 8vw, 7.2rem);
  --digit-radius:     0.55rem;

  /* ---- Navbar ---- */
  --navbar-h:        60px;
  --navbar-bg:       rgba(10,10,20,0.80);
  --navbar-border:   rgba(99,102,241,0.2);

  /* ---- Shadows & Blur ---- */
  --shadow-card:     0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow:     0 0 30px var(--flip-glow-color);
  --blur-glass:      backdrop-filter: blur(18px) saturate(1.6);

  /* ---- Z-index Stack ---- */
  --z-bg:         0;
  --z-content:    10;
  --z-navbar:     100;
  --z-offcanvas:  200;
  --z-modal:      300;
  --z-overlay:    400;
  --z-loading:    999;
  --z-fab:        150;

  /* ---- Spacing ---- */
  --section-gap:  2.5rem;
  --card-pad:     1.25rem;

  /* ---- Transitions ---- */
  --trans-fast:   0.15s ease;
  --trans-med:    0.3s ease;
  --trans-slow:   0.6s ease;

  /* ---- Background ---- */
  --bg-blur:       0px;
  --bg-brightness: 1;
  --bg-overlay-opacity: 0.55;
}

/* =====================================================
   LIGHT THEME OVERRIDES
   ===================================================== */
[data-theme="light"] {
  --clr-bg-primary:   #f0f2ff;
  --clr-bg-secondary: #e8eaf6;
  --clr-bg-card:      rgba(255,255,255,0.88);
  --clr-bg-glass:     rgba(99,102,241,0.06);
  --clr-border:       rgba(0,0,0,0.12);
  --clr-border-glow:  rgba(99,102,241,0.25);

  --clr-text-primary:   #1a1a2e;
  --clr-text-secondary: rgba(20,20,40,0.65);
  --clr-text-muted:     rgba(20,20,40,0.40);

  --flip-bg:          #dde1ff;
  --flip-bg-alt:      #c5cbf7;
  --flip-text:        #1a1a2e;
  --flip-shadow:      rgba(0,0,0,0.18);
  --flip-highlight:   rgba(255,255,255,0.6);
  --flip-glow-color:  rgba(99,102,241,0.25);

  --navbar-bg:    rgba(240,242,255,0.85);
  --shadow-card:  0 8px 32px rgba(99,102,241,0.15);
}

/* =====================================================
   COLOR PALETTE THEMES
   ===================================================== */
[data-palette="blue"] {
  --clr-accent:  #3b82f6;
  --clr-accent-2:#1d4ed8;
  --flip-glow-color: rgba(59,130,246,0.45);
  --flip-separator-color: #3b82f6;
}
[data-palette="green"] {
  --clr-accent:  #10b981;
  --clr-accent-2:#059669;
  --flip-glow-color: rgba(16,185,129,0.45);
  --flip-separator-color: #10b981;
}
[data-palette="red"] {
  --clr-accent:  #ef4444;
  --clr-accent-2:#dc2626;
  --flip-glow-color: rgba(239,68,68,0.45);
  --flip-separator-color: #ef4444;
}
[data-palette="gold"] {
  --clr-accent:  #f59e0b;
  --clr-accent-2:#d97706;
  --flip-glow-color: rgba(245,158,11,0.45);
  --flip-separator-color: #f59e0b;
}
[data-palette="cyan"] {
  --clr-accent:  #06b6d4;
  --clr-accent-2:#0891b2;
  --flip-glow-color: rgba(6,182,212,0.45);
  --flip-separator-color: #06b6d4;
}
[data-palette="pink"] {
  --clr-accent:  #ec4899;
  --clr-accent-2:#be185d;
  --flip-glow-color: rgba(236,72,153,0.45);
  --flip-separator-color: #ec4899;
}
[data-palette="neon"] {
  --clr-accent:  #00fff5;
  --clr-accent-2:#7fff00;
  --flip-glow-color: rgba(0,255,245,0.5);
  --flip-separator-color: #00fff5;
  --flip-bg: #001a1a;
  --flip-bg-alt: #002626;
}
[data-palette="purple"] {
  --clr-accent:  #8b5cf6;
  --clr-accent-2:#7c3aed;
  --flip-glow-color: rgba(139,92,246,0.45);
  --flip-separator-color: #8b5cf6;
}