/* =========================================
   PLANORA – Light Theme (Default Active)
   =========================================
   HOW TO SWITCH THEMES:
   • Developer: copy theme-dark.css → theme.css to go dark
   • End-user:  click the sun/moon button in the navbar
   ========================================= */

:root {
  /* ── Backgrounds ── */
  --bg:       #fafcff;
  --bg2:      #f0f8ff;
  --bg3:      #e2f0fc;
  --surface:  #ffffff;
  --surface2: #f5faff;

  /* ── Borders ── */
  --border:  rgba(14, 100, 180, 0.14);
  --border2: rgba(0, 148, 220, 0.1);

  /* ── Brand Accents ── */
  --accent:      #0a7cdc;
  --accent2:     #00a0e4;
  --accent3:     #5c3dff;
  --accent-rgb:  10, 124, 220;
  --accent2-rgb: 0, 160, 228;

  /* ── Text ── */
  --text:  #102233;
  --text2: #2e4d72;
  --text3: #6a8aaa;
  --white: #071525; /* used for headings — dark in light theme */

  /* ── Gradients ── */
  --grad:  linear-gradient(135deg, var(--accent), var(--accent2));
  --grad2: linear-gradient(135deg, var(--accent2), var(--accent3));

  /* ── Shadows ── */
  --shadow:  0 8px 40px rgba(10, 124, 220, 0.10);
  --shadow2: 0 20px 60px rgba(0, 0, 0, 0.10);

  /* ── Radius ── */
  --radius:  12px;
  --radius2: 20px;

  /* ── Fonts ── */
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ── Theme-specific UI ── */
  --nav-scrolled-bg:  rgba(255, 255, 255, 0.92);
  --dropdown-bg:      rgba(250, 254, 255, 0.98);
  --mobile-menu-bg:   rgba(244, 250, 255, 0.99);
  --hero-overlay:     linear-gradient(to bottom, rgba(240, 246, 252, 0.82), rgba(240, 246, 252, 0.96));
  --particle-rgb:     10, 124, 220;
  --scrollbar-track:  #e4eef9;
  --card-overlay:     linear-gradient(to top, rgba(240,246,252,0.94) 0%, rgba(240,246,252,0.5) 60%, transparent 100%);
}