/* =========================================================
   HamPajooh — Theme Tokens
   Two complete palettes (light default + dark override)
   Toggled via [data-theme="light|dark"] on <html>
   ========================================================= */

:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f7ff;
  --bg-2: #eef3ff;
  --surface: #ffffff;
  --surface-2: #f4f7ff;
  --surface-3: #e9efff;

  --border: rgba(30, 58, 138, 0.09);
  --border-2: rgba(30, 58, 138, 0.18);

  --text: #0a1633;
  --text-soft: #475569;
  --muted: #64748b;

  --primary: #2563eb;
  --primary-2: #3b82f6;
  --primary-3: #1d4ed8;
  --primary-soft: rgba(37, 99, 235, 0.08);
  --primary-tint: rgba(37, 99, 235, 0.14);
  --accent: #0ea5e9;
  --accent-2: #06b6d4;
  --success: #10b981;
  --danger: #ef4444;

  --card-bg: #ffffff;
  --card-bg-hover: #ffffff;
  --card-border: rgba(30, 58, 138, 0.08);
  --card-border-h: rgba(37, 99, 235, 0.28);
  --card-shadow-h: 0 24px 50px -22px rgba(37, 99, 235, 0.28);

  --navbar-bg: rgba(255, 255, 255, 0.82);
  --navbar-border: rgba(30, 58, 138, 0.08);

  --input-bg: #f8faff;
  --input-bg-focus: #ffffff;

  --section-alt-bg: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.035) 50%, transparent);
  --footer-bg: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.04));

  --mock-bar-bg: linear-gradient(180deg, #f8fafc, #f1f5f9);
  --mock-side-bg: #f8faff;
  --mock-url-bg: #eff6ff;
  --mock-url-text: #2563eb;

  --toast-bg: rgba(255, 255, 255, 0.98);
  --toast-text: #0a1633;
  --toast-border: rgba(30, 58, 138, 0.12);

  --orb-1: #3b82f6;
  --orb-2: #0ea5e9;
  --orb-3: #6366f1;
  --orb-opacity: 0.22;
  --orb-blur: 120px;

  --grid-color: rgba(37, 99, 235, 0.055);

  --bar-a: linear-gradient(180deg, #60a5fa, #2563eb);
  --bar-b: linear-gradient(180deg, #38bdf8, #0ea5e9);
  --bar-c: linear-gradient(180deg, #818cf8, #6366f1);

  --shadow-md: 0 16px 40px -20px rgba(37, 99, 235, 0.25);
  --shadow-lg: 0 30px 70px -22px rgba(37, 99, 235, 0.30);

  --radius: 18px;
  --radius-sm: 12px;
  --container: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0b14;
  --bg-2: #0d0f1c;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.09);

  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.16);

  --text: #e9ebf5;
  --text-soft: #b7bcd2;
  --muted: #7f859e;

  --primary: #6366f1;
  --primary-2: #818cf8;
  --primary-3: #4f46e5;
  --primary-soft: rgba(99, 102, 241, 0.12);
  --primary-tint: rgba(99, 102, 241, 0.20);
  --accent: #22d3ee;
  --accent-2: #06b6d4;
  --success: #34d399;
  --danger: #f87171;

  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  --card-bg-hover: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  --card-border: rgba(255, 255, 255, 0.09);
  --card-border-h: rgba(129, 140, 248, 0.35);
  --card-shadow-h: 0 26px 55px -22px rgba(0, 0, 0, 0.65);

  --navbar-bg: rgba(10, 11, 20, 0.78);
  --navbar-border: rgba(255, 255, 255, 0.08);

  --input-bg: rgba(0, 0, 0, 0.28);
  --input-bg-focus: rgba(0, 0, 0, 0.42);

  --section-alt-bg: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02) 50%, transparent);
  --footer-bg: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35));

  --mock-bar-bg: rgba(0, 0, 0, 0.32);
  --mock-side-bg: rgba(0, 0, 0, 0.18);
  --mock-url-bg: rgba(255, 255, 255, 0.05);
  --mock-url-text: var(--muted);

  --toast-bg: rgba(20, 22, 34, 0.96);
  --toast-text: #e9ebf5;
  --toast-border: rgba(255, 255, 255, 0.12);

  --orb-1: #6366f1;
  --orb-2: #06b6d4;
  --orb-3: #8b5cf6;
  --orb-opacity: 0.45;
  --orb-blur: 110px;

  --grid-color: rgba(255, 255, 255, 0.028);

  --bar-a: linear-gradient(180deg, #818cf8, #6366f1);
  --bar-b: linear-gradient(180deg, #22d3ee, #06b6d4);
  --bar-c: linear-gradient(180deg, #a78bfa, #7c3aed);

  --shadow-md: 0 16px 40px -18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.65);
}