/* =========================================================
   VARIABLES & DESIGN SYSTEM (Dark/Light Theme)
   ========================================================= */

:root {
  /* Font Family */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-code: 'JetBrains Mono', Consolas, Monaco, monospace;

  /* Base Palette (Default Dark Theme) */
  --bg-primary: #292a2d;
  --bg-card: rgba(41, 42, 45, 0.85);
  --bg-card-hover: rgba(50, 52, 58, 0.95);
  --bg-secondary: #202124;
  --bg-glass: rgba(41, 42, 45, 0.7);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.12);

  /* Typography */
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-muted: #6e7681;
  --text-highlight: #00f2fe;

  /* Accent Colors */
  --accent-primary: #28df99;
  --accent-secondary: #00c9a7;
  --accent-cyan: #00f2fe;
  --accent-pink: #ff007f;
  --accent-orange: #ff7b00;
  --accent-gold: #feca57;

  /* Star & Meteor Colors */
  --star-color: #ff9e53;
  --star-glow: #ff7b00;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55);

  /* Radii & Transitions */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   LIGHT THEME (Sắc nét, tương phản cao, dễ đọc 100%)
   ========================================================= */
body:not(.dark-theme) {
  --bg-primary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-secondary: #e2e8f0;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --border-color: #cbd5e1;
  --border-glass: #e2e8f0;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-highlight: #0284c7;

  --accent-primary: #059669;
  --accent-secondary: #047857;
  --star-color: #d97706;
  --star-glow: #f59e0b;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12);
}