/* ═══════════════════════════════════════════════════════════════════
   MasterTrackThai Design Tokens
   Single source of truth for all pages
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --mt-bg: #09090b;
  --mt-bg-panel: #151417;
  --mt-bg-card: #1d1b1f;
  --mt-bg-elevated: #17161a;
  --mt-bg-overlay: rgba(8, 8, 10, .78);

  /* ── Gold / Brand ── */
  --mt-gold: #c9a663;
  --mt-gold-light: #e7ce91;
  --mt-gold-dark: #8d6e38;
  --mt-gold-border: rgba(201, 169, 104, .28);
  --mt-gold-glow: rgba(201, 169, 104, .12);

  /* ── Accent Colors ── */
  --mt-cyan: #00E5FF;
  --mt-green: #7BC96F;
  --mt-red: #FF4D5A;
  --mt-orange: #ff950a;
  --mt-purple: #9B5CFF;
  --mt-blue: #3B82F6;

  /* ── Text ── */
  --mt-ink: #F5F7FA;
  --mt-muted: #9FB3C8;
  --mt-sub: #bdb7aa;

  /* ── Borders ── */
  --mt-line: rgba(201, 169, 104, .28);
  --mt-line-light: rgba(232, 213, 170, .52);

  /* ── Typography ── */
  --mt-font: "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
  --mt-font-display: "Arial Black", "Impact", "Noto Sans Thai", sans-serif;
  --mt-display: "Arial Black", "Impact", "Noto Sans Thai", sans-serif;

  /* ── Spacing Scale (4px base) ── */
  --mt-space-xs: 4px;
  --mt-space-sm: 8px;
  --mt-space-md: 12px;
  --mt-space-lg: 16px;
  --mt-space-xl: 20px;
  --mt-space-2xl: 24px;

  /* ── Border Radius ── */
  --mt-radius-sm: 6px;
  --mt-radius-md: 8px;
  --mt-radius-lg: 12px;
  --mt-radius-xl: 14px;
  --mt-radius-full: 999px;

  /* ── Shadows ── */
  --mt-shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --mt-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --mt-shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);
  --mt-shadow-gold: 0 0 18px var(--mt-gold-glow);

  /* ── Transitions ── */
  --mt-transition: .15s ease;
}

/* ── Font Display ── */
@font-face {
  font-family: "Noto Sans Thai";
  font-display: swap;
  src: local("Noto Sans Thai"), local("NotoSansThai");
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mt-bg);
  color: var(--mt-ink);
  font-family: var(--mt-font);
  font-size: 13px;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; touch-action: manipulation; }
img, svg { display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Gold Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(20, 19, 22, .6); }
::-webkit-scrollbar-thumb { background: rgba(201, 169, 104, .4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201, 169, 104, .65); }
* { scrollbar-width: thin; scrollbar-color: rgba(201, 169, 104, .4) rgba(20, 19, 22, .6); }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Focus States ── */
:focus-visible {
  outline: 2px solid var(--mt-gold);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mt-gold);
  outline-offset: 2px;
  border-radius: var(--mt-radius-sm);
}