/* ============================================
   THEME VARIABLES
   ============================================ */

:root {
  /* Timing */
  --transition-speed: 0.3s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Spacing */
  --section-padding: clamp(60px, 10vw, 120px);
  --container-max: 1100px;
  --container-padding: clamp(20px, 5vw, 60px);

  /* Font */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ============================================
   DARK MODE (default)
   ============================================ */

[data-theme="dark"] {
  --bg-base:        #0d1117;
  --bg-surface:     #161b22;
  --bg-elevated:    #1e2632;
  --bg-glass:       rgba(22, 27, 34, 0.75);

  --accent-primary:   #60a5fa;   /* blue-400 */
  --accent-secondary: #93c5fd;   /* blue-300 */
  --accent-subtle:    #bfdbfe;   /* blue-200 */
  --accent-glow:      rgba(96, 165, 250, 0.15);
  --accent-glow-md:   rgba(96, 165, 250, 0.25);

  --text-primary:   #f0f6ff;
  --text-secondary: #94a3b8;
  --text-muted:     #4b5563;

  --border:         rgba(96, 165, 250, 0.12);
  --border-hover:   rgba(96, 165, 250, 0.35);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(96, 165, 250, 0.12);

  --navbar-blur: blur(16px);
}

/* ============================================
   LIGHT MODE
   ============================================ */

[data-theme="light"] {
  --bg-base:        #f0f6ff;
  --bg-surface:     #ffffff;
  --bg-elevated:    #e8f1fd;
  --bg-glass:       rgba(255, 255, 255, 0.8);

  --accent-primary:   #2563eb;   /* blue-600 */
  --accent-secondary: #3b82f6;   /* blue-500 */
  --accent-subtle:    #60a5fa;   /* blue-400 */
  --accent-glow:      rgba(37, 99, 235, 0.08);
  --accent-glow-md:   rgba(37, 99, 235, 0.18);

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  --border:         rgba(37, 99, 235, 0.12);
  --border-hover:   rgba(37, 99, 235, 0.35);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.08);

  --navbar-blur: blur(16px);
}