/* Bebas Neue — local font */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/BebasNeue-Regular.ttf') format('truetype');}

/* Sarabun — loaded via Google Fonts (replaces Anakotmai) */
/* @font-face handled by Google Fonts CDN */

/* ─────────────────────────────────────────
   TOKENS
───────────────────────────────────────── */
:root {
  --bg:       #080808;
  --surface:  #111111;
  --line:     #202020;
  --line2:    #2c2c2c;
  --dim:      #ffffff;
  --muted:    #ffffff;
  --sub:      #ffffff;
  --white:    #ffffff;
  --red:      #e8001a;
  --red-a:    rgba(232,0,26,.08);
  --fd: 'Bebas Neue', 'Sarabun', sans-serif;
  --fm: 'DM Mono', 'Sarabun', monospace;
  --fb: 'DM Sans', 'Sarabun', sans-serif;
  --ft: 'Sarabun', sans-serif;
}

/* LIGHT MODE */
[data-theme="light"] {
  --bg:       #f8f8f6;
  --surface:  #ffffff;
  --line:     #e0e0e0;
  --line2:    #cccccc;
  --dim:      #aaaaaa;
  --muted:    #777777;
  --sub:      #444444;
  --white:    #111111;
  --red:      #d40018;
  --red-a:    rgba(212,0,24,.07);
}
[data-theme="light"] body { background:var(--bg); color:var(--white) }
[data-theme="light"] #nav { background:rgba(248,248,246,.97) }
[data-theme="light"] .bn  { background:rgba(248,248,246,.97) }
[data-theme="light"] .modal { background:var(--bg) }

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
button, [onclick] { touch-action: manipulation }
html { scroll-behavior:smooth }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Sarabun', 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background:var(--red); color:#fff }
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-thumb { background:var(--line2) }