/* L2Pilot 0.4 web client — design tokens of Claude Design P0a v2 (design/claude-design/P0a-v2/tokens.css:
   direction 1a, colours 3a), with the font and language rules of PORT-NOTES.md and errata E10.
   Dark theme only. Contrast pairs: README-P0a.md §6 (WCAG 2.x). No font files and no url(): system font
   stacks only (CSP §1; Hangul, Greek, Cyrillic and Vietnamese need no web font, E10). No uppercase
   transforms anywhere (README-P0a.md §0 point 5).
   Loaded before style.css: until the W10 port moves the screens onto these tokens, the few custom
   properties style.css still declares itself (e.g. --line) keep their old values. */
:root {
  /* backgrounds */
  --bg: #111819;           /* page */
  --surface: #1a2726;      /* cards, fields */
  --surface-2: #23312f;    /* quiet buttons, neutral tile */
  --viewer: #080d0e;       /* behind the game picture */

  /* text */
  --text: #e8eeee;         /* 15.31:1 on --bg */
  --muted: #97aaa8;        /* 7.39:1 on --bg; 6.34:1 on --surface */
  --faint: #778d86;        /* footer only, min. 11 px, ONLY on --bg (5.08:1); on --surface and --surface-2 use --muted */
  --off: #8a9a97;          /* offline, no permission: 6.12:1 on --bg */

  /* accent and states */
  --gold: #dfbd75;         /* primary button, "X is in control" */
  --gold-ink: #18201b;     /* text on gold: 9.26:1 */
  --gold-light: #e5c783;   /* focus, selection */
  --quiet: #23312f;  --quiet-ink: #dbe5df;                       /* 10.49:1 */
  --stop-bg: #3e2628; --stop-ink: #ffc9c6; --stop-line: #a8646a;  /* Disconnect, Stop sharing 9.53:1; border 3.4:1 on --bg */
  --ok-bg: #15281f;   --ok-ink: #a6edc0;                          /* Ready, 👍 11.43:1 */
  --danger-bg: #250f14; --danger-ink: #ff7777; --danger-line: #f56666; /* danger overlays 7.05:1 */
  --attn-bg: #2b170d; --attn-ink: #f08a4b;                        /* attention 6.86:1 (hue 23°, not gold) */
  --focus: #e5c783;        /* outline 2 px, offset 3 px */
  --line-strong: #667b75;  /* borders of fields and controls: 3.98:1 on --bg, 3.42:1 on --surface */
  --line: #23312f;         /* decorative hairline (never the border of a control) */

  /* typography — PORT-NOTES: Malgun Gothic in the host stack (Hangul on Windows) */
  --font-host: "Segoe UI", "Malgun Gothic", Arial, sans-serif;
  --font-client: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-11: 11px; --fs-13: 13px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-32: 32px;
  --fs-overlay: clamp(20px, 3vw, 30px);

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

  /* radii */
  --r-key: 8px;            /* host buttons and W7 keys */
  --r-card: 12px;          /* cards */
  --r-pill: 999px;         /* status chip */

  /* target heights */
  --h-btn: 44px;           /* host and phone: minimum */
  --h-connect: 56px;       /* "Connect" */
  --h-key: 44px;           /* W7 keys at 342–392 px; 48 px at ≥ 393 px */
  --h-key-lg: 48px;

  /* motion */
  --t-fast: 150ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; }
}

/* Line breaking of scripts that need it (PORT-NOTES „Fonty i łamanie”, P0a v2.3, errata E10: the UI fits
   the longest language). The rules stand ONLY on the root (html:lang, v2.3): a bare :lang(x) matches
   every element and overrides what the parent set (measured in v2.3 for vi: 18.2 px instead of
   16.25 px in a status row). The font goes through the variables (Malgun Gothic for Hangul, P0a v2.3);
   --lh-min carries the same value as a floor for every component rule of style.css (.btn 1.25, titles
   1.2–1.3, cards 1.3–1.4), which would otherwise keep the tight Latin line-height for stacked
   Vietnamese diacritics or Hangul (review WF2); style.css writes each line-height as
   max(<its own>, var(--lh-min, 0)). */
html:lang(ko) {
  --font-host: "Malgun Gothic", "Segoe UI", Arial, sans-serif;
  --font-client: "Malgun Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  word-break: keep-all;
  line-height: 1.5;
  --lh-min: 1.5;
}
html:lang(vi) { line-height: 1.4; --lh-min: 1.4; }

/* Language switch (errata E10, lib/lang-switch.js langSelect): native <select> „CODE · native name”,
   the footer look of the P0a v2 prototype, touch target ≥ 44 px (PORT-NOTES; the package had 32 px). */
.lang-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  color: var(--muted);
}
.lang-select__control {
  min-height: var(--h-btn);
  padding: 0 var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-13);
}
.lang-select__control:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}