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

/* ─── THEME VARIABLES ─── */
:root { color-scheme: light dark; }

[data-theme="light"] {
  --bg:         #f9f7f3;
  --bg2:        #ffffff;
  --bg3:        rgba(28,58,94,0.025);
  --text:       #1a1917;
  --muted:      #62615c;
  --faint:      #e8e5df;
  --accent:     #1c3a5e;
  --accent-h:   #0d2240;
  --accent2:    #c94a2e;
  --border:     rgba(28,58,94,0.11);
  --card:       rgba(28,58,94,0.025);
  --nav-bg:     rgba(249,247,243,0.93);
  --shadow:     0 0 0 1px rgba(28,58,94,0.07);
  --grid-line:  rgba(28,58,94,0.04);
  --glow:       rgba(28,58,94,0.07);
  --tag-text:   #5a5955;
  --tag-border: rgba(28,58,94,0.14);
  --input-bg:   rgba(28,58,94,0.04);
  --hl-border:  rgba(28,58,94,0.28);
  --link-hover: rgba(28,58,94,0.07);
  --pro-badge:  rgba(28,58,94,0.18);
  --badge-web-color:    #1d4ed8;
  --badge-web-border:   rgba(29,78,216,0.25);
  --badge-mob-color:    #6d28d9;
  --badge-mob-border:   rgba(109,40,217,0.25);
  --badge-game-color:   #15803d;
  --badge-game-border:  rgba(21,128,61,0.25);
}

[data-theme="dark"] {
  --bg:         #080c12;
  --bg2:        #0f141c;
  --bg3:        rgba(255,255,255,0.03);
  --text:       #e8e3d8;
  --muted:      #7a7888;
  --faint:      #1a2130;
  --accent:     #5a9fd4;
  --accent-h:   #ffffff;
  --accent2:    #ff6b4a;
  --border:     rgba(255,255,255,0.08);
  --card:       rgba(255,255,255,0.03);
  --nav-bg:     rgba(8,12,18,0.9);
  --shadow:     0 0 0 1px rgba(255,255,255,0.05);
  --grid-line:  rgba(90,159,212,0.04);
  --glow:       rgba(90,159,212,0.09);
  --tag-text:   #9a98a8;
  --tag-border: rgba(255,255,255,0.1);
  --input-bg:   rgba(255,255,255,0.05);
  --hl-border:  rgba(90,159,212,0.35);
  --link-hover: rgba(90,159,212,0.1);
  --pro-badge:  rgba(90,159,212,0.2);
  --badge-web-color:    #60a5fa;
  --badge-web-border:   rgba(96,165,250,0.25);
  --badge-mob-color:    #c4b5fd;
  --badge-mob-border:   rgba(196,181,253,0.25);
  --badge-game-color:   #86efac;
  --badge-game-border:  rgba(134,239,172,0.25);
}

/* ─── TYPOGRAPHY ─── */
html { scroll-behavior: smooth; }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size:   14px;
  line-height: 1.8;
  overflow-x:  hidden;
  transition:  background 0.3s, color 0.3s;
}

::selection {
  background: var(--accent);
  color: #f9f7f3;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }