/* ==========================================================================
   TOKKUROW - DESIGN TOKENS, RESET, BASE
   Verified current version. No changes needed.
   ========================================================================== */
:root {
  /* Surfaces */
  --bg:              #0a0704;
  --bg-deep:         #050302;
  --surface:         rgba(26, 18, 11, 0.94);
  --surface-2:       rgba(34, 24, 15, 0.96);

  /* Gold accent (P1) */
  --gold:            #e8c170;
  --gold-2:          #d4af68;
  --gold-3:          #a8843e;
  --gold-4:          #7a5c28;
  --gold-soft:       rgba(232, 193, 112, 0.14);
  --gold-mid:        rgba(232, 193, 112, 0.32);
  --gold-strong:     rgba(232, 193, 112, 0.55);

  /* Blue accent (P2) */
  --blue:            #7fb8e8;
  --blue-2:          #5a9dd4;
  --blue-3:          #2a6da0;
  --blue-soft:       rgba(127, 184, 232, 0.14);
  --blue-mid:        rgba(127, 184, 232, 0.32);
  --blue-strong:     rgba(127, 184, 232, 0.55);

  /* Text */
  --text:            #f6ecd8;
  --text-2:          #e0d2b8;
  --text-3:          #c4b294;
  --dim:             #b8a88a;
  --dim-2:           #8a7a62;
  --dim-3:           #5e5044;

  /* Semantic */
  --ok:              #27ae60;
  --ok-bright:       #7fd89a;
  --ok-soft:         rgba(39, 174, 96, 0.18);
  --bad:             #c0392b;
  --bad-bright:      #f0a89c;
  --bad-soft:        rgba(192, 57, 43, 0.18);
  --warn:            #e8a87c;

  /* Borders */
  --border:          rgba(200, 164, 92, 0.18);
  --border-hover:    rgba(200, 164, 92, 0.35);
  --border-strong:   rgba(200, 164, 92, 0.5);

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;

  /* Radii */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Type */
  --font:      'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;

  --fs-2xs:  clamp(0.58rem, 0.54rem + 0.15vw, 0.66rem);
  --fs-xs:   clamp(0.65rem, 0.60rem + 0.20vw, 0.75rem);
  --fs-sm:   clamp(0.72rem, 0.68rem + 0.20vw, 0.84rem);
  --fs-base: clamp(0.82rem, 0.78rem + 0.25vw, 0.94rem);
  --fs-md:   clamp(0.90rem, 0.84rem + 0.30vw, 1.05rem);
  --fs-lg:   clamp(1.00rem, 0.92rem + 0.40vw, 1.18rem);
  --fs-xl:   clamp(1.20rem, 1.05rem + 0.70vw, 1.55rem);
  --fs-2xl:  clamp(1.50rem, 1.25rem + 1.10vw, 2.10rem);
  --fs-3xl:  clamp(1.85rem, 1.45rem + 1.80vw, 2.75rem);

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 6px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-xl:   0 28px 80px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 24px rgba(232, 193, 112, 0.35), 0 0 8px rgba(232, 193, 112, 0.2);
  --shadow-blue: 0 0 24px rgba(127, 184, 232, 0.35), 0 0 8px rgba(127, 184, 232, 0.2);

  /* Safe areas */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Motion */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    0.15s;
  --dur-base:    0.22s;
  --dur-slow:    0.35s;

  /* Z-index */
  --z-canvas:    0;
  --z-stats:     8;
  --z-hud:       10;
  --z-controls:  10;
  --z-toast:     50;
  --z-kickoff:   80;
  --z-screen:    100;
  --z-pause:     200;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1, "cv04" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

img, svg, canvas {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input { font-family: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(200, 164, 92, 0.25);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(200, 164, 92, 0.4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}