:root {
  /* =========================
     DEFAULT THEME: VELVET NIGHT
  ========================= */

  --bg-main: #05060a;
  --bg-top: #171a26;
  --bg-mid: #0a0c13;

  --text: #f4f6ff;
  --text-soft: #dce2ff;
  --text-label: #e4e7f4;
  --muted: #aab0c5;
  --muted-2: #cfd5ea;
  --placeholder: #8f97b0;

  --card: rgba(15, 18, 30, 0.72);
  --card-strong: rgba(17, 20, 32, 0.82);
  --card-strong-2: rgba(10, 12, 20, 0.78);

  --surface: rgba(255, 255, 255, 0.04);
  --surface-soft: rgba(255, 255, 255, 0.03);
  --surface-soft-2: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.06);

  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.10);
  --border-dashed: rgba(255, 255, 255, 0.14);

  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.08);
  --input-focus-border: rgba(142, 166, 255, 0.34);
  --input-focus-ring: rgba(142, 166, 255, 0.08);

  --accent-1: #8ea6ff;
  --accent-2: #9c7cff;
  --accent-3: #6ed0ff;
  --accent-1-rgb: 142, 166, 255;
  --accent-2-rgb: 156, 124, 255;
  --accent-3-rgb: 110, 208, 255;

  --grad-accent: linear-gradient(
    135deg,
    rgba(var(--accent-1-rgb), 0.20),
    rgba(var(--accent-2-rgb), 0.20)
  );
  --grad-accent-soft: linear-gradient(
    135deg,
    rgba(var(--accent-1-rgb), 0.14),
    rgba(var(--accent-2-rgb), 0.14)
  );
  --grad-logo: linear-gradient(
    135deg,
    rgba(var(--accent-1-rgb), 0.20),
    rgba(var(--accent-2-rgb), 0.18)
  );
  --grad-card: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  --grad-bubble: linear-gradient(
    180deg,
    rgba(18, 22, 36, 0.96),
    rgba(12, 14, 24, 0.96)
  );

  --orb-1: rgba(var(--accent-1-rgb), 0.28);
  --orb-2: rgba(var(--accent-2-rgb), 0.18);
  --orb-3: rgba(var(--accent-3-rgb), 0.14);

  --success-bg: rgba(90, 255, 180, 0.08);
  --success-border: rgba(90, 255, 180, 0.18);
  --success-text: #d6ffee;

  --error-bg: rgba(255, 90, 120, 0.08);
  --error-border: rgba(255, 90, 120, 0.20);
  --error-text: #ffd5df;

  --shadow-lg:
    0 30px 80px rgba(0, 0, 0, 0.48),
    0 0 40px rgba(128, 120, 255, 0.08);

  --shadow-accent-sm: 0 0 20px rgba(var(--accent-1-rgb), 0.08);
  --shadow-accent-md:
    0 0 18px rgba(var(--accent-1-rgb), 0.10),
    0 0 28px rgba(var(--accent-2-rgb), 0.08);
  --shadow-accent-lg:
    0 16px 34px rgba(0, 0, 0, 0.26),
    0 0 22px rgba(var(--accent-1-rgb), 0.12);
  --shadow-accent-lg-hover:
    0 20px 40px rgba(0, 0, 0, 0.30),
    0 0 28px rgba(var(--accent-1-rgb), 0.14);
}

/* =========================
   MIDNIGHT GLASS
========================= */

body[data-theme="midnight-glass"] {
  --bg-main: #050914;
  --bg-top: #11192b;
  --bg-mid: #09111d;

  --text: #f2f6ff;
  --text-soft: #d9e6ff;
  --text-label: #e5eeff;
  --muted: #9fb0cb;
  --muted-2: #c5d3ec;
  --placeholder: #8596b1;

  --card: rgba(12, 19, 32, 0.76);
  --card-strong: rgba(14, 22, 38, 0.86);
  --card-strong-2: rgba(8, 14, 26, 0.82);

  --surface: rgba(255, 255, 255, 0.035);
  --surface-soft: rgba(255, 255, 255, 0.025);
  --surface-soft-2: rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.055);

  --border: rgba(180, 210, 255, 0.10);
  --border-soft: rgba(180, 210, 255, 0.06);
  --border-strong: rgba(180, 210, 255, 0.14);
  --border-dashed: rgba(180, 210, 255, 0.16);

  --input-bg: rgba(255, 255, 255, 0.035);
  --input-border: rgba(180, 210, 255, 0.10);
  --input-focus-border: rgba(92, 142, 255, 0.36);
  --input-focus-ring: rgba(92, 142, 255, 0.08);

  --accent-1: #79a5ff;
  --accent-2: #5f87ff;
  --accent-3: #7fd7ff;
  --accent-1-rgb: 121, 165, 255;
  --accent-2-rgb: 95, 135, 255;
  --accent-3-rgb: 127, 215, 255;

  --orb-1: rgba(var(--accent-1-rgb), 0.22);
  --orb-2: rgba(var(--accent-2-rgb), 0.14);
  --orb-3: rgba(var(--accent-3-rgb), 0.10);
}

/* =========================
   PINK CLOUD
========================= */

body[data-theme="pink-cloud"] {
  --bg-main: #fff8fc;
  --bg-top: #fffafd;
  --bg-mid: #fdeef7;

  --text: #4f3142;
  --text-soft: #70495f;
  --text-label: #7d566c;
  --muted: #9a7890;
  --muted-2: #af8aa2;
  --placeholder: #bb9aad;

  --card: rgba(255, 255, 255, 0.74);
  --card-strong: rgba(255, 255, 255, 0.88);
  --card-strong-2: rgba(255, 247, 252, 0.94);

  --surface: rgba(255, 255, 255, 0.68);
  --surface-soft: rgba(255, 255, 255, 0.56);
  --surface-soft-2: rgba(255, 255, 255, 0.78);
  --surface-hover: rgba(255, 255, 255, 0.88);

  --border: rgba(229, 176, 206, 0.34);
  --border-soft: rgba(229, 176, 206, 0.22);
  --border-strong: rgba(229, 176, 206, 0.42);
  --border-dashed: rgba(229, 176, 206, 0.40);

  --input-bg: rgba(255, 255, 255, 0.72);
  --input-border: rgba(229, 176, 206, 0.30);
  --input-focus-border: rgba(245, 146, 197, 0.44);
  --input-focus-ring: rgba(245, 146, 197, 0.12);

  --accent-1: #f49bc7;
  --accent-2: #d7a2ff;
  --accent-3: #ffc0dc;
  --accent-1-rgb: 244, 155, 199;
  --accent-2-rgb: 215, 162, 255;
  --accent-3-rgb: 255, 192, 220;

  --orb-1: rgba(var(--accent-1-rgb), 0.26);
  --orb-2: rgba(var(--accent-2-rgb), 0.20);
  --orb-3: rgba(var(--accent-3-rgb), 0.18);

  --success-bg: rgba(110, 220, 170, 0.12);
  --success-border: rgba(110, 220, 170, 0.24);
  --success-text: #2d6c55;

  --error-bg: rgba(255, 120, 150, 0.12);
  --error-border: rgba(255, 120, 150, 0.24);
  --error-text: #8f4560;

  --shadow-lg:
    0 24px 60px rgba(194, 140, 170, 0.18),
    0 0 30px rgba(255, 190, 220, 0.20);
}