:root {
  --bg-primary: #0b1f24;
  --bg-deep: #050f12;
  --bg-soft: #122e34;
  --bg-elevated-transparent: rgba(11, 31, 36, 0.96);

  --card-soft: #122e34;
  --card-strong: #0c262b;

  --accent-primary: #00e5ff;
  --accent-strong: #00bfd8;
  --accent-soft: #5af2ff;

  --text-primary: #ffffff;
  --text-muted: #c6d0d3;
  --text-subtle: #8b9aa0;

  --border-subtle: #1e454d;
  --border-strong: #275a64;

  --badge-bg: rgba(0, 229, 255, 0.12);
  --btn-on-accent: #020a0b;
}

html.dark {
  --bg-primary: #0b1f24;
  --bg-deep: #050f12;
  --bg-soft: #122e34;
  --bg-elevated-transparent: rgba(11, 31, 36, 0.96);

  --card-soft: #122e34;
  --card-strong: #0c262b;

  --accent-primary: #00e5ff;
  --accent-strong: #5af2ff;
  --accent-soft: #5af2ff;

  --text-primary: #ffffff;
  --text-muted: #c6d0d3;
  --text-subtle: #8b9aa0;

  --border-subtle: #1e454d;
  --border-strong: #275a64;

  --badge-bg: rgba(0, 229, 255, 0.12);
  --btn-on-accent: #020a0b;
}

html:not(.dark) {
  --bg-primary: #ffffff;
  --bg-deep: #f4f8f9;
  --bg-soft: #f4f8f9;
  --bg-elevated-transparent: rgba(255, 255, 255, 0.96);

  --card-soft: #f4f8f9;
  --card-strong: #ffffff;

  --accent-primary: #00bfd8;
  --accent-strong: #009fb8;
  --accent-soft: #3edcf1;

  --text-primary: #0b1f24;
  --text-muted: #3a4a50;
  --text-subtle: #65757c;

  --border-subtle: #dce5e8;
  --border-strong: #c3d2d7;

  --badge-bg: rgba(0, 191, 216, 0.08);
  --btn-on-accent: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  scroll-behavior: smooth;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Glass & subtle shadows for cards */
.glass-card {
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.06)
    );
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html:not(.dark) .glass-card {
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.98)
    );
  box-shadow: 0 18px 40px rgba(18, 66, 82, 0.12);
  border: 1px solid rgba(223, 234, 238, 0.9);
}

/* Scrollbar styling (WebKit) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(121, 140, 147, 0.7);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(121, 140, 147, 1);
}

/* Simple reveal base class (JS will add Tailwind animation) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
}