/* =====================================================================================================================
   SS Online UI tokens + global "not a website" rules (direction A "Field Terminal", Proposed 2026-10-09).

   README (for page / HUD / front-end agents)
   - Load order: this file, then css/ui-kit.css, then page CSS. Every new CSS uses only these tokens.
   - Fonts: add ONE Google Fonts link in index.html (wave 2 owner) before this file:
       <link rel="preconnect" href="https://fonts.googleapis.com" />
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600&family=Oxanium:wght@500;700&display=swap" />
     The css2 API splits every family by unicode-range, so a browser only downloads the Thai / Latin slices it uses.
   - Units: 1u = 1 CSS px at UI scale 1. Write sizes as calc(N * var(--u)); 1rem = 16u. Hairlines stay 1px.
     --u comes from a CSS fallback below and is refined by js/ui/scale.js (applyUiScale), which also sets
     <html data-tier="phone|compact|full" data-input="touch|mouse" data-orient="landscape|portrait">.
   - Tiers: chosen by LOGICAL height (research-tech §14): phone < 560u, compact < 860u, full otherwise. Portrait is a
     separate axis (data-orient). Layout tokens (--head-h, --rail-w, --gutter, --detail-w, --side-w, --cell) change
     per tier, so components rarely need tier selectors of their own.
   - Token names --bg, --panel, --line, --line-strong, --hp, --exp and --good also exist in the legacy base.css /
     interface.css :root blocks. The block below uses `html:root` (higher specificity) so these values win whatever
     the load order; the HUD restyle (wave 2) moves the legacy CSS onto these tokens.
   - Global rules at the bottom: no page scroll, no selection / callout / tap flash outside editable fields, focus
     rings only for keyboard (:focus-visible), images not draggable, 16px minimum font in inputs (iOS zoom).
   ===================================================================================================================== */

html:root {
  /* --- colour (DESIGN §2.1; contrast checked in research-visual §3.2) --- */
  --bg: #0b0f10;
  --panel: #121a1c;
  --panel-2: #1a2427;
  --panel-3: #22303a;
  --line: #2e3d41;
  --line-strong: #587076;
  --text: #e8ede6;
  --dim: #95a39e;
  --faint: #5e6c68;
  --accent: #ffb21e;
  --accent-ink: #1a1203;
  --accent-dim: #8a6418;
  --info: #39c6d9;
  --info-dim: #1e6b76;
  --danger: #ff4b3a;
  --good: #7fe08a;
  --bad: #ff7a6b;
  --hp: #8edb5a;
  --exp: #f5d04a;
  --r-std: #b9c3c4;
  --r-tuned: #3d9bff;
  --r-special: #b26dff;
  --r-top: #ff9f1c;
  --scrim: rgba(5, 8, 9, 0.86);
  --glass: rgba(12, 18, 20, 0.88);
  --world-dim: rgba(4, 7, 8, 0.55);

  /* derived alphas (same hues as above; use these instead of ad-hoc rgba values) */
  --accent-a08: rgba(255, 178, 30, 0.08);
  --accent-a16: rgba(255, 178, 30, 0.16);
  --accent-a35: rgba(255, 178, 30, 0.35);
  --info-a10: rgba(57, 198, 217, 0.1);
  --info-a22: rgba(57, 198, 217, 0.22);
  --danger-a14: rgba(255, 75, 58, 0.14);
  --good-a14: rgba(127, 224, 138, 0.14);
  --text-a04: rgba(232, 237, 230, 0.04);
  --text-a08: rgba(232, 237, 230, 0.08);
  --line-a60: rgba(46, 61, 65, 0.6);
  --panel-a72: rgba(18, 26, 28, 0.72);
  --panel2-a90: rgba(26, 36, 39, 0.9);
  --r-std-a: rgba(185, 195, 196, 0.22);
  --r-tuned-a: rgba(61, 155, 255, 0.22);
  --r-special-a: rgba(178, 109, 255, 0.22);
  --r-top-a: rgba(255, 159, 28, 0.22);

  /* --- type (DESIGN §2.2) --- */
  --f-head: "Chakra Petch", "IBM Plex Sans Thai", "Thonburi", "Leelawadee UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Thai", "Chakra Petch", "Thonburi", "Leelawadee UI", system-ui, sans-serif;
  --f-num: "Oxanium", "Chakra Petch", "IBM Plex Sans Thai", system-ui, sans-serif;

  /* --- scale: CSS fallback for --u (js/ui/scale.js overrides it inline with the rounded value) --- */
  --user: 1;
  --u: calc(var(--user) * clamp(1px, min(100vw / 1920, 100svh / 1080), 2px));

  --fs-xs: max(11px, calc(12 * var(--u))); /* Latin eyebrows / tags only, never Thai; >= 11 px on phones */
  --fs-label: max(11px, calc(13 * var(--u))); /* smallest Thai */
  --fs-sm: calc(14 * var(--u));
  --fs-body: calc(16 * var(--u));
  --fs-lg: calc(18 * var(--u));
  --fs-xl: calc(20 * var(--u));
  --fs-title: calc(24 * var(--u));
  --fs-h1: calc(28 * var(--u));
  --fs-hero: calc(36 * var(--u));

  --sp-1: calc(4 * var(--u));
  --sp-2: calc(8 * var(--u));
  --sp-3: calc(12 * var(--u));
  --sp-4: calc(16 * var(--u));
  --sp-5: calc(20 * var(--u));
  --sp-6: calc(24 * var(--u));
  --sp-7: calc(32 * var(--u));
  --sp-8: calc(40 * var(--u));

  /* chamfer depths (DESIGN §2.3) */
  --cut-lg: calc(20 * var(--u));
  --cut-md: calc(12 * var(--u));
  --cut-sm: calc(7 * var(--u));
  --cut-xs: calc(4 * var(--u));

  /* control heights: 36u with a mouse, 52u (never under 44px) on touch */
  --tap: calc(36 * var(--u));
  --tap-sm: calc(30 * var(--u));
  --tap-lg: calc(46 * var(--u));

  /* layout tokens (tier rules below) */
  --head-h: calc(72 * var(--u));
  --rail-w: calc(96 * var(--u));
  --gutter: calc(24 * var(--u));
  --detail-w: calc(460 * var(--u));
  --side-w: calc(360 * var(--u));
  --cell: calc(84 * var(--u));
  --body-max: calc(2400 * var(--u)); /* window body never grows past this (ultrawide); it hugs the rail */

  /* motion */
  --t-fast: 120ms;
  --t-med: 160ms;
  --t-slow: 240ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* patterns */
  --hazard: repeating-linear-gradient(135deg, var(--accent) 0 calc(6 * var(--u)), transparent 0 calc(12 * var(--u)));
  --hazard-dim: repeating-linear-gradient(135deg, rgba(255, 178, 30, 0.45) 0 calc(5 * var(--u)), transparent 0 calc(10 * var(--u)));
  --hatch: repeating-linear-gradient(135deg, rgba(149, 163, 158, 0.13) 0 calc(4 * var(--u)), transparent 0 calc(9 * var(--u)));
  --grid-faint:
    linear-gradient(rgba(232, 237, 230, 0.025) 1px, transparent 1px) 0 0 / calc(40 * var(--u)) calc(40 * var(--u)),
    linear-gradient(90deg, rgba(232, 237, 230, 0.025) 1px, transparent 1px) 0 0 / calc(40 * var(--u)) calc(40 * var(--u));

  /* layers */
  --z-win: 40;
  --z-dialog: 60;
  --z-toast: 70;
  --z-tip: 80;

  /* safe areas (same names as the legacy base.css) */
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);

  color-scheme: dark;
}

/* phones read closer: keep 0.85-1.0 and never grow (research-tech §14) */
@media (pointer: coarse) {
  html:root {
    --u: calc(var(--user) * clamp(0.85px, 100svh / 440, 1px));
  }
}

/* --- input kind: touch targets (data-input is set by scale.js; the media query covers the first paint) --- */
@media (pointer: coarse) {
  html:root:not([data-input="mouse"]) {
    --tap: max(44px, calc(52 * var(--u)));
    --tap-sm: max(44px, calc(44 * var(--u)));
    --tap-lg: max(48px, calc(60 * var(--u)));
  }
}
html:root[data-input="touch"] {
  --tap: max(44px, calc(52 * var(--u)));
  --tap-sm: max(44px, calc(44 * var(--u)));
  --tap-lg: max(48px, calc(60 * var(--u)));
}

/* --- tiers (logical height; see scale.js) --- */
html:root[data-tier="compact"] {
  --head-h: calc(62 * var(--u));
  --rail-w: calc(86 * var(--u));
  --gutter: calc(16 * var(--u));
  --detail-w: calc(380 * var(--u));
  --side-w: calc(300 * var(--u));
  --cell: calc(74 * var(--u));
}
html:root[data-tier="phone"] {
  --head-h: calc(56 * var(--u));
  --rail-w: calc(74 * var(--u));
  --gutter: calc(10 * var(--u));
  --detail-w: calc(316 * var(--u));
  --side-w: calc(232 * var(--u));
  --cell: calc(64 * var(--u));
  --cut-lg: calc(14 * var(--u));
}
html:root[data-orient="portrait"] {
  --gutter: calc(10 * var(--u));
  --cell: calc(68 * var(--u));
}

/* =====================================================================================================================
   Global "not a website" rules (DESIGN §2.6, research-tech §0-§13)
   ===================================================================================================================== */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  font-size: calc(16 * var(--u));
}
body {
  position: fixed;
  inset: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
[hidden] {
  display: none !important;
}

/* typing and copying stay possible in fields (old iOS needs the explicit override) */
input,
textarea,
[contenteditable=""],
[contenteditable="true"],
.selectable {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: manipulation;
  cursor: text;
}
input,
textarea,
select {
  font-family: var(--f-body);
  font-size: max(16px, 1rem); /* iOS zooms into fields under 16 px; the floor stays in px (research-tech §10) */
  color: var(--text);
}

/* no ghost images when dragging art; no link look */
img,
svg,
a {
  -webkit-user-drag: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

/* focus rings only for keyboard / gamepad; components draw their own cyan brackets */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* type helpers (g- prefix: the legacy CSS already has .num / .eyebrow) */
.g-num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
}
.g-eyebrow {
  font-family: var(--f-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.2;
}
.g-eyebrow.th /* Thai text in an eyebrow slot: no tracking, no caps */ {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-label);
}

@media (prefers-reduced-motion: reduce) {
  html:root {
    --t-fast: 1ms;
    --t-med: 1ms;
    --t-slow: 1ms;
  }
}