/* XLUX.viz design tokens — taken verbatim from the XLUX Hub WebUI (data/webui/style.css)
   and the XLUX Node WebUI (web/node-webui.css), so the viewer reads as one piece with them.
   Only tokens live here; components are in ui/kit.css. Design system: docs/UI-DESIGNSYSTEM.md.

   Rules (house rules of the Hub):
   - every colour of the UI shell comes from a token here, never a literal at the call site;
   - neutral white is the only "accent": no blue, no violet, no own brand hue in the shell.
     Colour only where it MEANS something: light output, status (ok / warn / error),
     the axis colours of the navigation gizmo (convention);
   - dark is the default, [data-theme="light"] overrides the same names. */
:root {
  /* ── App backgrounds (Hub) ── */
  --app-bg:           #0a0a0b;
  --panel-bg:         #121214;
  --setting-panel:    #1c1c1e;   /* card */
  --surface-elevated: #1f1f22;   /* elevated card / active control */
  --surface-sunken:   #161618;   /* recessed surface below a card */
  --surface-chip:     #2c2c2e;   /* raised input / chip fill (iOS tertiary fill) */
  --surface-overlay:  rgba(12,12,15,.97);   /* bottom sheets */
  --surface-glass:    rgba(18,18,20,.78);   /* floating chrome over the 3D view (blurred) */

  /* ── Surfaces / layers (Hub) ── */
  --surface-hover:  rgba(255,255,255,.04);
  --surface-active: rgba(255,255,255,.08);
  --surface-raised: rgba(255,255,255,.12);
  --surface-1:      rgba(255,255,255,.06);
  --surface-2:      rgba(255,255,255,.04);
  --surface-recess: rgba(0,0,0,.2);

  /* ── Borders (Hub) ── */
  --border:         rgba(255,255,255,.1);
  --border-subtle:  rgba(255,255,255,.06);
  --border-light:   rgba(255,255,255,.08);
  --border-medium:  rgba(255,255,255,.1);
  --border-strong:  rgba(255,255,255,.18);
  --chip-idle-bg:   rgba(0,0,0,.2);
  --chip-sel-bd:    rgba(255,255,255,.3);

  /* ── Text (Hub) ── */
  --text-primary:   #ffffff;
  --text-bright:    rgba(255,255,255,.80);
  --text-soft:      rgba(255,255,255,.65);
  --text-dim:       rgba(255,255,255,.55);
  --text-secondary: rgba(255,255,255,.45);
  --text-muted:     rgba(255,255,255,.35);
  --text-faint:     rgba(255,255,255,.30);
  --text-hint:      rgba(255,255,255,.25);
  --text-disabled:  rgba(255,255,255,.18);

  /* ── Axis colours (convention X red, Y green, Z blue): ONE set for the navigation gizmo, the
     ground grid (X axis, Z axis; Y in the ortho side views) and the transform handles. They mark
     directions in the 3D picture, not the chrome, so they are the same in light and dark. ── */
  --viz-axis-x: #e5484d;
  --viz-axis-y: #6bbf59;
  --viz-axis-z: #4d8fe5;
  /* ground grid (minor lines, major lines, origin cross); rgba alpha = line opacity. The 3D picture
     does not follow the UI theme (the studio stays dark), so the light theme keeps these light lines. */
  --viz-grid-minor:  rgba(255,255,255,.08);
  --viz-grid-major:  rgba(255,255,255,.18);
  --viz-grid-origin: rgba(255,255,255,.6);

  /* ── Status (Hub) — the only colours the shell may use ── */
  --clr-ok:    #34d399;
  --clr-warn:  #fde047;
  --clr-amber: #fbbf24;
  --clr-error: #f87171;
  --clr-error-strong: #ef4444;
  /* fixture group identity (patch grid blocks, table swatches): muted, never blue or violet, never a
     status hue — a conflict stays the one red thing in the patch */
  --grp-0: #d9b77e; --grp-1: #9cc58a; --grp-2: #e09aae; --grp-3: #6fc7b5;
  --grp-4: #e0a07a; --grp-5: #c2c26a; --grp-6: #e6d27a; --grp-7: #bdb3a6;

  /* ── Buttons (Hub/Node): primary = white with black text ── */
  --btn-primary-bg: #ffffff;
  --btn-primary-fg: #000000;
  --btn-secondary-bg: #1f1f22;

  /* ── Scrims (Hub) ── */
  --scrim:        rgba(0,0,0,.65);
  --scrim-strong: rgba(0,0,0,.72);

  /* ── Pill fader (Hub js/ui/pill-fader.js) ── */
  --pill-bg:       rgba(20,20,22,1);
  --pill-shadow:   0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.4);
  --pill-fill:     linear-gradient(to right, rgba(255,255,255,.5), var(--surface-raised));
  --pill-knob-bg:  rgba(0,0,0,.35);
  --pill-knob-fg:  #fff;
  --pill-val-bg:   rgba(0,0,0,.4);
  --pill-val-fg:   #fff;

  /* ── Toggle (Hub .toggle-wrap) ── */
  --toggle-off:    rgba(255,255,255,.16);
  --toggle-on:     rgba(255,255,255,.3);
  --toggle-thumb:  rgba(255,255,255,.8);
  --toggle-thumb-on: #fff;

  /* ── Shadows (decorative depth, Hub) ── */
  --shadow-pop:   0 10px 30px rgba(0,0,0,.4);
  --shadow-chip:  0 1px 4px rgba(0,0,0,.35);
  --tile-glass: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 12%, rgba(255,255,255,0) 28%),
                radial-gradient(125% 125% at 50% 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,.04) 86%, rgba(255,255,255,.085) 100%);

  /* ── Type (Hub/Node: system stack, 700 for labels, uppercase section marks) ── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-mark: 11px;     /* section mark: 700, .09em, uppercase, --text-muted */
  --fs-small: 12px;    /* secondary line, chip, status */
  --fs-body: 14px;     /* rows, buttons */
  --fs-field: 15px;    /* inputs */
  --fs-title: 17px;    /* sheet title */
  --fs-hero: 20px;     /* field label on top (Hub form rule), top-bar title */

  /* ── Radii (Hub) ── */
  --r-card:  18px;     /* cards, panels, popovers */
  --r-sheet: 28px;     /* bottom sheets (top corners) */
  --r-btn:   14px;     /* buttons, segmented frame */
  --r-seg:   10px;     /* segmented indicator, list rows */
  --r-pill:  999px;    /* chips, round buttons */

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

  /* ── Icon sizes (Hub: 16 in buttons, 18–20 in bars, 22 in the rail) ── */
  --ico-s: 16px; --ico-m: 18px; --ico-l: 20px;

  /* ── Hit targets ── */
  --hit: 44px;          /* buttons, chips, rail — the Hub/Node floor for anything tappable */
  --hit-touch: 44px;    /* coarse pointer (touch) — the floor for anything tappable */

  /* ── Selection and transform guides (UI-KONZEPT §4.1) ── */
  --sel-active: #ffffff;
  --sel-other:  #d8d4cc;
  --sel-glow:   rgba(255,255,255,.22);
  --sel-hidden: rgba(255,255,255,.45);
  --guide:      #e8e4dc;
  /* text selection (::selection): neutral white veil instead of the browser's blue */
  --text-selection-bg: rgba(255,255,255,.25);
  --text-selection-fg: #ffffff;

  /* ── Stacking (Hub: roles, never bare numbers) ── */
  --z-canvas-ui: 10;    /* labels / overlay canvas drawn over the 3D view */
  --z-chrome:    20;    /* top bar, rail, nav column, status */
  --z-panel:     30;    /* docked panels */
  --z-sheet:    100;    /* modal sheets / dialogs */
  --z-menu:     160;    /* popovers, menus */
  --z-dialog:   200;    /* confirm dialog */
  --z-toast:    600;

  /* ── Layout (XLUX.viz shell, set/refined by ui/shell.js) ── */
  --edge: 12px;         /* gap to the viewport edge and between docked regions */
  --hud-h: 56px;        /* top bar */
  --rail-w: 56px;       /* collapsed editor rail */
  --rail-open-w: 220px; /* rail expanded with labels */
  --panel-w: 340px;     /* docked panel */
  --nav-w: 44px;        /* navigation column button */
  --gizmo: 96px;        /* navigation gizmo */
  --status-h: 28px;     /* status line at the bottom */
  --rail-space: 0px;    /* shell: rail width + edge while the rail is on screen */
  --lp-space: 0px;      /* shell: left panel width + edge while one is open */
  --rp-space: 0px;      /* shell: right panel width + edge while one is open */

  /* ── legacy aliases: older module CSS still says var(--panel) / var(--acc). They resolve to the
     neutral tokens, so nothing can turn blue again (the old --acc WAS the blue accent). ── */
  --bg: var(--app-bg); --panel: var(--panel-bg); --panel2: var(--surface-elevated); --line: var(--border);
  --txt: var(--text-primary); --dim: var(--text-secondary); --acc: var(--text-primary);
  --ok: var(--clr-ok); --warn: var(--clr-amber); --err: var(--clr-error);
}
@media (pointer: coarse) {
  :root { --nav-w: 44px; }
}
@media (max-width: 639px) {
  :root { --edge: 8px; --hud-h: 52px; --gizmo: 80px; --rail-w: 52px; }
}
@media (min-width: 1440px) {
  :root { --panel-w: 360px; }
}

/* Light theme (Hub/Node values). The primary button stays neutral on light, too: near-black. */
[data-theme="light"] {
  --app-bg:           #f5f5f7;
  --panel-bg:         #ffffff;
  --setting-panel:    #ffffff;
  --surface-elevated: #fafafb;
  --surface-sunken:   #ececef;
  --surface-chip:     #e9e9ee;
  --surface-overlay:  rgba(255,255,255,.98);
  --surface-glass:    rgba(250,250,252,.82);
  --surface-hover:  rgba(0,0,0,.04);
  --surface-active: rgba(0,0,0,.08);
  --surface-raised: rgba(0,0,0,.10);
  --surface-1:      rgba(0,0,0,.05);
  --surface-2:      rgba(0,0,0,.03);
  --surface-recess: rgba(0,0,0,.04);
  --border:         rgba(0,0,0,.1);
  --border-subtle:  rgba(0,0,0,.05);
  --border-light:   rgba(0,0,0,.07);
  --border-medium:  rgba(0,0,0,.1);
  --border-strong:  rgba(0,0,0,.18);
  --chip-idle-bg:   rgba(0,0,0,.04);
  --chip-sel-bd:    rgba(0,0,0,.28);
  --text-primary:   #0f0f0f;
  --text-selection-bg: rgba(0,0,0,.16);
  --text-selection-fg: #0f0f0f;
  --text-bright:    rgba(0,0,0,.80);
  --text-soft:      rgba(0,0,0,.65);
  --text-dim:       rgba(0,0,0,.55);
  --text-secondary: rgba(0,0,0,.45);
  --text-muted:     rgba(0,0,0,.35);
  --text-faint:     rgba(0,0,0,.30);
  --text-hint:      rgba(0,0,0,.25);
  --text-disabled:  rgba(0,0,0,.18);
  --clr-ok:    #059669;
  --clr-warn:  #b45309;
  --clr-amber: #b45309;
  --clr-error: #dc2626;
  --clr-error-strong: #b91c1c;
  --grp-0: #9a7434; --grp-1: #4f8a3c; --grp-2: #b0506c; --grp-3: #2b8a78;
  --grp-4: #b0643a; --grp-5: #7d7d22; --grp-6: #94821c; --grp-7: #7a6f62;
  --btn-primary-bg: #0f0f0f;
  --btn-primary-fg: #ffffff;
  --btn-secondary-bg: #ffffff;
  --scrim:        rgba(0,0,0,.38);
  --scrim-strong: rgba(0,0,0,.46);
  --pill-bg:       var(--surface-chip);
  --pill-shadow:   inset 0 0 0 1px var(--border-subtle), 0 1px 2px rgba(0,0,0,.05);
  --pill-fill:     linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,.10));
  --pill-knob-bg:  var(--surface-elevated);
  --pill-knob-fg:  var(--text-primary);
  --pill-val-bg:   var(--surface-elevated);
  --pill-val-fg:   var(--text-primary);
  --toggle-off:    rgba(0,0,0,.14);
  --toggle-on:     rgba(0,0,0,.72);
  --toggle-thumb:  #ffffff;
  --toggle-thumb-on: #ffffff;
  --shadow-pop:   0 10px 28px rgba(0,0,0,.16);
  --shadow-chip:  0 1px 3px rgba(0,0,0,.12);
  --tile-glass: none;
}