/* ============================================================
   MRBOM HUB — Theme Tokens
   แก้สีธีมทั้งเว็บได้จากไฟล์นี้ไฟล์เดียว
   ============================================================ */
:root {
  /* Base */
  --bg-0: #06070a;
  --bg-1: #0d0f13;
  --surface: rgba(255,255,255,.03);
  --surface-hi: rgba(255,255,255,.055);
  --border: rgba(255,255,255,.07);
  --border-hi: rgba(255,255,255,.12);

  /* Brand / Neon */
  --red: #ff2a3c;
  --red-hi: #ff5566;
  --red-deep: #cf1120;
  --red-tint: rgba(255,42,60,.14);
  --red-glow: rgba(255,42,60,.35);

  /* Text */
  --text: #e8eaed;
  --text-2: #b8bcc3;
  --text-dim: #82888f;
  --text-mute: #5d636c;

  /* Status */
  --ok: #2fd47a;
  --warn: #ffcc4d;
  --info: #4da3ff;
  --danger: #ff2a3c;

  /* Typography */
  --font-sans: "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radius */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 99px;

  /* Spacing (4pt scale) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 26px; --s-7: 32px; --s-8: 46px;

  /* Elevation */
  --sh-card: 0 18px 40px rgba(0,0,0,.5);
  --sh-hover: 0 26px 54px rgba(0,0,0,.6), 0 0 30px var(--red-glow);
  --sh-neon: 0 0 26px var(--red-glow);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .16s;
  --t-base: .22s;
  --t-slow: .32s;

  /* Effects */
  --glass: blur(16px);
  --grid-line: rgba(255,42,60,.045);
  --grid-size: 60px;

  /* Bootstrap override */
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--text);
  --bs-primary: var(--red);
  --bs-border-color: var(--border);
}