/* VanVR App — shared design tokens and focus baseline.

   Loaded FIRST by VanVRApp.html and rbac-dashboard.html (before styles.css /
   rbac-inline.css), so both screens read the same colors, the same text
   scale and the same focus indicator. Moved out of css/styles.css on
   2026-09-28 (UI-001, readiness decision D1); the dashboard used to keep
   its own :root copy with drifted values (--muted was the pre-L3 #7a8099).

   Theme: <html data-theme="light"> switches the palette. The main app
   writes the choice to localStorage 'vanvrai-theme'; the dashboard reads
   the same key (js/theme-apply.js). Text size: --vv-text-scale, written by
   js/text-scale.js from localStorage 'vv-text-scale'.

   Only values and page-wide rules belong here. Component styles stay in
   styles.css / rbac-inline.css. */

    :root {
      /* UI-204: every font-size rule in this file is wrapped in
         calc(Npx * var(--vv-text-scale)) (see the "L4" comment above for
         the mechanical bulk-conversion this built on). Default 1 = the
         original sizes, unchanged. js/text-scale.js sets this on
         document.documentElement based on the user's Display > Text Size
         choice, so it cascades to every rule below without touching each
         one individually. */
      --vv-text-scale: 1;
      --bg: #0a0d14;
      --surface: #141720;
      --surface2: #1e2230;
      --surface3: #262b3f;
      --border: #272c3f;
      /* UI contrast pass (2026-10-05): --border is ~1.3:1 against the panels,
         fine for dividers but it made ghost/outline BUTTONS read as bare text
         (Sean: "Show/Hide icon is hard to see"). Buttons use this instead —
         >= 3:1 on --surface / --surface2 / --bg (WCAG 1.4.11, non-text). */
      --border-strong: #646c8c;
      --text: #e2e6f0;
      /* L3: #7a8099 was 4.05:1 on --surface2 and 3.58:1 on --surface3, both
         below WCAG AA's 4.5:1 floor for normal-size text — exactly where
         10-12px secondary labels live. #8f95ad measures 5.33:1 / 4.71:1
         against the same two surfaces (verified), so both pass. */
      --muted: #8f95ad;
      --accent: #7c3aed;
      --accent-l: #a78bfa;
      --accent2: #60a5fa;
      --accent-dim: rgba(124,58,237,0.14);
      --accent2-dim: rgba(96,165,250,0.12);
      --link: #8ec5ff;            /* readable link blue on dark */
      --link-hover: #b6dbff;
      --success: #4ade80;
      --error: #f87171;
      --warn: #f59e0b;
      --axis-x: #f76e6e;
      --axis-y: #6ef78a;
      --axis-z: #6eaef7;
      --annot: #ffc832;
      --annot-dim: rgba(255,200,50,0.15);
      --lib-width: 264px;
    }
    [data-theme="light"] {
      /* CI v2 (2026-10-16): light theme uses the VanVR App brand palette
         (Azure Blue #398FC7, Clinical Teal #20C7BF, Side Teal #159FAD,
         Text Navy #102C43, page bg #f5f9fa). Dark keeps the original
         purple/blue palette on purpose. Teal is for emphasis/navigation only;
         body text stays neutral navy. Text-size teal is darkened (#0f7f8a,
         5.0:1 on white) because #20C7BF is ~1.9:1 and fails WCAG AA. */
      --bg: #f5f9fa;
      --surface: #ffffff;
      --surface2: #e6f3f4;
      --surface3: #d5e8ea;
      --border: #cfe0e4;
      --border-strong: #6f8d9c;   /* >= 3:1 on white and on --surface2 */
      --text: #102C43;
      --muted: #4a6577;
      --accent: #2a78ab;          /* Azure Blue, darkened for white button text (4.9:1) */
      --accent-l: #0f7f8a;        /* teal for text/active states (5.0:1 on white) */
      --accent2: #148a9a;
      --accent-dim: rgba(21,159,173,0.12);
      --accent2-dim: rgba(57,143,199,0.10);
      --link: #0d6fa8;
      --link-hover: #102C43;
    }

    /* L5: the app previously had exactly one narrow :focus-visible rule
       (scoped to a single consent checkbox), so a keyboard user tabbing
       through the app couldn't see where focus was almost anywhere —
       including the role="button" divs/spans newly made keyboard-reachable
       for L6. A single global rule covers every interactive element
       consistently.

       2026-08-16 — switched from :focus-visible to :focus at Sean's request
       ("키보드 탭이 이 영역을 지정할 때 유저가 어떻게 알어? 아무 표시가 없어",
       then "이 영역으로 들어왔을 때도 해줘" for the header + viewport). The
       original note here said :focus-visible was chosen so a mouse click
       never draws a ring — but that turned out to be the actual complaint.
       :focus-visible is a browser HEURISTIC: it hides the ring whenever the
       browser decides focus arrived from a pointer, so opening a menu with
       the mouse and then pressing Tab left the user with no idea where the
       keyboard was. Plain :focus means the indicator tracks the real thing
       it is supposed to represent — whether an element currently has focus —
       with no guessing. This matches the two places the app already made the
       same call deliberately: .pg-consent on the entry policy gate, and
       #three-canvas:focus ("this region is now receiving your key presses",
       see its comment further down). Now the whole app behaves that way. */
    :focus {
      outline: 2px solid var(--accent-l, #a78bfa);
      outline-offset: 2px;
      border-radius: 2px;
    }
    /* tabindex="-1" means "script focus target, not user-reachable" — the
       dialog containers vvOpenModal() focuses when they hold no focusable
       control, scroll anchors, and so on. Ringing those would outline a
       whole panel for something the user never navigated to, which is the
       one case where :focus is louder than :focus-visible was. */
    [tabindex="-1"]:focus { outline: none; }
    /* Accent-filled controls (header "Manage"/primary buttons, the floating
       Start Drawing FAB, the toolbar's active tool) are already purple, so
       the purple ring above vanishes on exactly the elements it matters most
       for. White ring + accent halo instead — legible on the dark chrome, on
       a surface panel, and on an accent fill alike. Same treatment the draw
       toolbar uses, kept identical on purpose so "focus" looks like one
       thing everywhere in the app. */