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

html {
  scroll-behavior: smooth;
}

/* ── DARK MODE (default) ── */
:root {
  --font-d: 'Courier Prime', monospace;
  --font-b: 'Inter', sans-serif;
  --font-m: 'JetBrains Mono', monospace;
  --ok: #3fb950;
  --warn: #d29922;
  --err: #f85149;

  --pg: #003153;
  --sf: #1B3F6E;
  --sf2: rgba(0, 49, 83, 0.55);
  --sf3: rgba(0, 49, 83, 0.38);
  --sf4: rgba(27, 63, 110, 0.55);
  --sf5: rgba(27, 63, 110, 0.8);
  --cb: #071523;
  --pb: #0d1e30;
  --ft: #00203d;
  --ac: #4A8AB5;
  --ac10: rgba(74, 138, 181, 0.10);
  --ac12: rgba(74, 138, 181, 0.12);
  --ac18: rgba(74, 138, 181, 0.18);
  --ac20: rgba(74, 138, 181, 0.20);
  --ac25: rgba(74, 138, 181, 0.25);
  --ac30: rgba(74, 138, 181, 0.30);
  --ac35: rgba(74, 138, 181, 0.35);
  --tp: #E8F4FB;
  --ts: rgba(232, 244, 251, 0.65);
  --tm: rgba(232, 244, 251, 0.50);
  --tf: rgba(232, 244, 251, 0.40);
  --tff: rgba(232, 244, 251, 0.25);
  --hs: rgba(0, 49, 83, 0.96);
  --grid: linear-gradient(rgba(74, 138, 181, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 138, 181, 0.18) 1px, transparent 1px);
  --logo-filter: invert(1) brightness(2);
  --scrollbar-track: rgba(0, 49, 83, 0.3);
  --scrollbar-thumb: rgba(74, 138, 181, 0.4);
  --code-text: #7dd3fc;
}

/* ── LIGHT MODE ── */
html[data-theme="light"] {
  --pg: #eef5fb;
  --sf: #d4e7f5;
  --sf2: rgba(31, 95, 150, 0.12);
  --sf3: rgba(31, 95, 150, 0.07);
  --sf4: rgba(31, 95, 150, 0.10);
  --sf5: rgba(31, 95, 150, 0.08);
  --cb: #f4f8fc;
  --pb: #e8f2fa;
  --ft: #c5ddef;
  --ac: #1f5f96;
  --ac10: rgba(31, 95, 150, 0.10);
  --ac12: rgba(31, 95, 150, 0.12);
  --ac18: rgba(31, 95, 150, 0.18);
  --ac20: rgba(31, 95, 150, 0.20);
  --ac25: rgba(31, 95, 150, 0.25);
  --ac30: rgba(31, 95, 150, 0.30);
  --ac35: rgba(31, 95, 150, 0.35);
  --tp: #001d35;
  --ts: rgba(0, 29, 53, 0.70);
  --tm: rgba(0, 29, 53, 0.55);
  --tf: rgba(0, 29, 53, 0.45);
  --tff: rgba(0, 29, 53, 0.30);
  --hs: rgba(238, 245, 251, 0.97);
  --grid: linear-gradient(rgba(31, 95, 150, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 95, 150, 0.10) 1px, transparent 1px);
  --logo-filter: none;
  --scrollbar-track: rgba(74, 138, 181, 0.1);
  --scrollbar-thumb: rgba(31, 95, 150, 0.3);
  --code-text: #1a4f7a;
}

body {
  background: var(--pg);
  color: var(--tp);
  font-family: var(--font-b);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 200ms ease, color 200ms ease;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}