/* ═══════════════════════════════════════════════════════════════
   SIPBP — Unified Theme Variables
   Shared across: login, dashboard (index), form
   ═══════════════════════════════════════════════════════════════ */

/* ── LIGHT (default) ── */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg: #f1f5f9;
  --card: #fff;
  --card-s: #ffffff;
  --card2: #f8fafc;

  /* Borders */
  --bdr: #e2e8f0;
  --bdr-h: rgba(0, 0, 0, 0.1);
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Text */
  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;

  /* Accent */
  --cyan: #0891b2;
  --cyan-g: rgba(8, 145, 178, 0.06);
  --cyan-b: rgba(8, 145, 178, 0.12);
  --cyanD: #065f73;
  --accent: #0891b2;
  --accent-2: #06b6d4;
  --accent-soft: rgba(8, 145, 178, 0.07);
  --accent-border: rgba(8, 145, 178, 0.18);

  /* Semantic */
  --green: #059669;
  --amber: #d97706;
  --amb: #d97706;
  --red: #dc2626;
  --purple: #7c3aed;
  --blue: #2563eb;

  /* Inputs */
  --input-bg: rgba(0, 0, 0, 0.02);
  --input-focus: rgba(8, 145, 178, 0.04);

  /* Header */
  --header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%);
  --header-text: #f1f5f9;
  --header-accent: #22d3ee;

  /* Shadows */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.18);

  /* Overlays */
  --overlay-bg: rgba(255, 255, 255, 0.95);
  --overlay-border: rgba(15, 23, 42, 0.08);

  /* Map */
  --map-bg: #e8ecf0;
  --bar-track: #e2e8f0;
  --hover-accent: rgba(8, 145, 178, 0.05);

  /* Nav */
  --nav-bg: #fff;
  --nav-active: #0891b2;
  --nav-active-text: #fff;
  --nav-text: #64748b;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.6);

  /* Login-specific */
  --grid-c: rgba(0, 0, 0, 0.03);
  --dot-c: rgba(8, 145, 178, 0.15);
  --right-bg: rgba(255, 255, 255, 0.5);
  --btn-grad: linear-gradient(135deg, #0891b2, #065f73);
  --btn-text: #ffffff;
  --opt-bg: #ffffff;
}

/* ── DARK ── */
[data-theme="dark"] {
  /* Backgrounds */
  --bg: #0a0e1a;
  --card: #111827;
  --card-s: #101620;
  --card2: #1a2332;

  /* Borders */
  --bdr: #1f2937;
  --bdr-h: rgba(255, 255, 255, 0.12);
  --border: #1f2937;
  --border-strong: #374151;

  /* Text */
  --t1: #f0f2f5;
  --t2: #94a3b8;
  --t3: #64748b;

  /* Accent */
  --cyan: #22d3ee;
  --cyan-g: rgba(34, 211, 238, 0.08);
  --cyan-b: rgba(34, 211, 238, 0.2);
  --cyanD: #0891b2;
  --accent: #22d3ee;
  --accent-2: #06b6d4;
  --accent-soft: rgba(34, 211, 238, 0.08);
  --accent-border: rgba(34, 211, 238, 0.2);

  /* Semantic */
  --green: #34d399;
  --amber: #fbbf24;
  --amb: #fbbf24;
  --red: #f87171;
  --purple: #a78bfa;
  --blue: #60a5fa;

  /* Inputs */
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-focus: rgba(6, 214, 208, 0.08);

  /* Header */
  --header-bg: linear-gradient(135deg, #030712 0%, #0a0e1a 60%, #0f172a 100%);
  --header-text: #f1f5f9;
  --header-accent: #22d3ee;

  /* Shadows */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.7);

  /* Overlays */
  --overlay-bg: rgba(17, 24, 39, 0.95);
  --overlay-border: rgba(255, 255, 255, 0.08);

  /* Map */
  --map-bg: #0a0e1a;
  --bar-track: #1f2937;
  --hover-accent: rgba(34, 211, 238, 0.05);

  /* Nav */
  --nav-bg: #111827;
  --nav-active: #22d3ee;
  --nav-active-text: #030712;
  --nav-text: #64748b;

  /* Glass */
  --glass-bg: rgba(17, 24, 39, 0.85);
  --glass-border: rgba(255, 255, 255, 0.05);

  /* Login-specific */
  --grid-c: rgba(255, 255, 255, 0.02);
  --dot-c: rgba(6, 214, 208, 0.25);
  --right-bg: rgba(10, 14, 20, 0.4);
  --btn-grad: linear-gradient(135deg, #06d6d0, #0891b2);
  --btn-text: #0a0e14;
  --opt-bg: #101620;
}

/* ── SHARED RESETS & BASE ── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background: var(--bg);
  color: var(--t1);
  transition: background 0.3s, color 0.3s;
}

/* ── SHARED ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.5; }
}
@keyframes gridMove {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 16px rgba(6, 214, 208, 0.1); }
  50%      { box-shadow: 0 0 32px rgba(6, 214, 208, 0.2); }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}