/* ============================================================================================
   VOLURR — SOVEREIGN UI · the one token layer  (app/static/css/sovereign.css)   V2-A
   ============================================================================================
   WHAT THIS IS
     One vocabulary for Room OS, named the way the design brief names things, resolving onto the
     platform's authoritative tokens (base.css colours, tokens.css scales, typography-contract
     faces). It defines NO second palette: every colour below is an alias or a mix of a base token,
     so light and dark stay one design and the chart's price colours stay the chart's.

   THE LAWS IT ENCODES
     · VOLURR red is identity, focus, live and selected-high-value. It is not wallpaper.
     · --up / --down are PRICE DIRECTION ONLY (PROJECT_LAWS art. 3). UI success/danger have their
       own tokens so a destructive control never reads as "the brand" and never reads as "a
       falling price".
     · Every persistent pixel earns its space: surfaces are hairlines and tone, not boxes in boxes.
     · Nothing a person reads is below 12.5 px; captions (10.5 px) are uppercase labels only.
     · Motion communicates state: 120–180 ms for a control, 180–240 ms for a panel, 260 for a
       modal, none at all under prefers-reduced-motion.

   LOAD ORDER
     After liverooms.css. Custom properties resolve at computed time so the aliases are global
     regardless of order; the component rules later in this file win by cascade order.

   MEASURED BASELINE (docs/rooms/VOLURR_SOVEREIGN_UI_AUDIT.md, 2026-09-03)
     liverooms.css: 116 hex literals · 22 radii · 31 z-indexes · 22 font sizes · 89 !important.
     The dock computed 8–12 distinct font sizes per pane. This file is what those numbers are
     measured against after each tranche.
   ============================================================================================ */

:root{
  /* ── surfaces (deep graphite → floating) ─────────────────────────────────────────────── */
  --sv-bg:               var(--bg);                                            /* #070a12 dark · #eef0f4 light */
  --sv-surface-0:        var(--bg2);                                           /* the workspace floor */
  --sv-surface-1:        var(--card);                                          /* a panel */
  --sv-surface-2:        var(--card2);                                         /* a raised row / control */
  --sv-surface-floating: color-mix(in srgb, var(--card) 94%, #ffffff 6%);      /* menus, popovers, sheets */
  --sv-scrim:            var(--scrim, rgba(0,0,0,.62));

  /* ── borders ─────────────────────────────────────────────────────────────────────────── */
  --sv-border-subtle:    var(--line);
  --sv-border-active:    color-mix(in srgb, var(--gold) 55%, var(--line));
  --sv-border-danger:    color-mix(in srgb, var(--sv-danger) 60%, var(--line));

  /* ── text ─────────────────────────────────────────────────────────────────────────────── */
  --sv-text-primary:     var(--txt);
  --sv-text-secondary:   var(--txt2);
  --sv-text-muted:       var(--muted);
  --sv-text-disabled:    color-mix(in srgb, var(--muted) 55%, transparent);
  --sv-text-on-red:      #ffffff;

  /* ── VOLURR red ───────────────────────────────────────────────────────────────────────── */
  --sv-red:              var(--gold);                                          /* #e23b3b dark · #d62f2f light */
  --sv-red-hover:        color-mix(in srgb, var(--gold) 86%, #ffffff 14%);
  --sv-red-active:       var(--gold2);
  --sv-red-soft:         color-mix(in srgb, var(--gold) 12%, transparent);     /* selected fills, live tints */
  --sv-red-line:         color-mix(in srgb, var(--gold) 38%, transparent);     /* selected hairlines */
  --sv-red-glow:         var(--glow);

  /* ── semantic states (NOT price direction) ────────────────────────────────────────────── */
  --sv-success:          #2fa36f;
  --sv-success-soft:     color-mix(in srgb, #2fa36f 14%, transparent);
  --sv-warning:          var(--amber, #e8a33d);
  --sv-warning-soft:     color-mix(in srgb, var(--amber, #e8a33d) 14%, transparent);
  --sv-danger:           #ff6a57;                                              /* coral: not the brand crimson, not --down */
  --sv-danger-soft:      color-mix(in srgb, #ff6a57 14%, transparent);
  --sv-info:             var(--info, #3aa0ff);
  --sv-info-soft:        color-mix(in srgb, var(--info, #3aa0ff) 14%, transparent);

  /* ── spacing (2 · 4 · 6 · 8 · 12 · 16 · 20 · 24 · 32) ───────────────────────────────── */
  --sv-1:2px; --sv-2:4px; --sv-3:6px; --sv-4:8px; --sv-5:12px; --sv-6:16px; --sv-7:20px; --sv-8:24px; --sv-9:32px;

  /* ── radius ───────────────────────────────────────────────────────────────────────────── */
  --sv-r-s:6px; --sv-r-m:10px; --sv-r-l:14px; --sv-r-pill:999px;

  /* ── elevation ────────────────────────────────────────────────────────────────────────── */
  --sv-el-none:     none;
  --sv-el-surface:  0 0 0 1px var(--sv-border-subtle);
  --sv-el-floating: 0 12px 32px -14px rgba(0,0,0,.55), 0 0 0 1px var(--sv-border-subtle);
  --sv-el-overlay:  0 32px 80px -30px rgba(0,0,0,.7), 0 0 0 1px var(--sv-border-subtle);

  /* ── motion ───────────────────────────────────────────────────────────────────────────── */
  --sv-fast:.12s; --sv-normal:.16s; --sv-panel:.22s; --sv-modal:.26s;
  --sv-ease: cubic-bezier(.2,.9,.3,1);
  --sv-ease-exit: cubic-bezier(.4,0,.8,.4);

  /* ── z-index (aligned with the shell: topbar 40 · side 50 · dock 180 · hub 1200 · modal 1300) */
  --sv-z-base:1; --sv-z-nav:50; --sv-z-floating:180; --sv-z-menu:1200; --sv-z-modal:1300; --sv-z-critical:1500;

  /* ── icons ────────────────────────────────────────────────────────────────────────────── */
  --sv-ic-s:14px; --sv-ic-m:16px; --sv-ic-l:20px; --sv-ic-stroke:1.75;

  /* ── typography roles (size / line-height / weight; the faces are the contract's) ─────── */
  --sv-font-ui:   var(--volurr-font-ui, 'Inter', 'Vazirmatn', system-ui, sans-serif);
  --sv-font-num:  var(--volurr-font-numeric, 'JetBrains Mono', ui-monospace, monospace);
  --sv-t-display:   700 22px/1.2  var(--sv-font-ui);
  --sv-t-page:      700 17px/1.25 var(--sv-font-ui);
  --sv-t-panel:     700 14px/1.3  var(--sv-font-ui);
  --sv-t-card:      600 13px/1.35 var(--sv-font-ui);
  --sv-t-body:      400 13.5px/1.5 var(--sv-font-ui);
  --sv-t-secondary: 400 12.5px/1.45 var(--sv-font-ui);
  --sv-t-label:     600 12.5px/1.3 var(--sv-font-ui);          /* tabs, chips, buttons */
  --sv-t-meta:      500 11.5px/1.35 var(--sv-font-ui);
  --sv-t-caption:   600 10.5px/1.3 var(--sv-font-ui);        /* uppercase, tracked: labels only, never sentences */
  --sv-t-numeric:   500 13px/1.3  var(--sv-font-num);
  --sv-t-financial: 600 15px/1.2  var(--sv-font-num);
  --sv-caption-track:.06em;
  /* size-only tokens for rules that set size alone (liverooms.css was mapped onto these, 22 -> 9) */
  --sv-fs-caption:10.5px; --sv-fs-meta:11.5px; --sv-fs-label:12.5px; --sv-fs-card:13px; --sv-fs-body:13.5px;
  --sv-fs-panel:14px; --sv-fs-lg:16px; --sv-fs-page:17px; --sv-fs-display:22px;

  /* ── targets: a control is at least this tall; on a finger device, the platform minimum ─── */
  --sv-target:32px; --sv-target-touch:44px;

  /* ── focus ────────────────────────────────────────────────────────────────────────────── */
  --sv-focus: 0 0 0 2px var(--sv-surface-1), 0 0 0 4px var(--sv-red);

  /* ── shell geometry (the shell's own values, named once) ─────────────────────────────── */
  --sv-rail-w:64px; --sv-rail-w-expanded:208px; --sv-topbar-h:66px; --sv-dock-w:348px; --sv-nav-w:320px;

  /* ── Room OS aliases, re-pointed. liverooms.css reads these 977 times; from here on they
        resolve through the Sovereign layer, so its semantics reach every rule at once. ─────── */
  --lr-crimson: var(--sv-red);
  --lr-ink:     var(--sv-text-primary);
  --lr-ink2:    var(--sv-text-secondary);
  --lr-faint:   var(--sv-text-muted);
  --lr-line:    var(--sv-border-subtle);
  --lr-bg:      var(--sv-surface-0);
  --lr-glass:   color-mix(in srgb, var(--sv-surface-0) 88%, transparent);
  --lr-dock:    var(--sv-dock-w);
}

/* light: same hierarchy and geometry; only what a graphite→ceramic flip requires */
html[data-theme="light"]{
  --sv-surface-floating: #ffffff;
  --sv-red-hover:        color-mix(in srgb, var(--gold) 88%, #000000 12%);
  --sv-success:          #1f8a5b;
  --sv-danger:           #c9302c;
  --sv-el-floating: 0 12px 32px -18px rgba(20,30,50,.28), 0 0 0 1px var(--sv-border-subtle);
  --sv-el-overlay:  0 32px 80px -34px rgba(20,30,50,.34), 0 0 0 1px var(--sv-border-subtle);
}
/* caution amber: one hue, both themes, owned here (liverooms.css declared it twice) */
:root{ --lr-warn: var(--sv-warning); }
html[data-theme="light"]{ --sv-warning:#b3791a; }

/* ── primitives ─────────────────────────────────────────────────────────────────────────── */
.sv-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.sv-fin{ font:var(--sv-t-financial); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.sv-fin.up{ color:var(--up); } .sv-fin.down{ color:var(--down); }          /* price direction: the chart's colours, nothing else's */
.sv-cap{ font:var(--sv-t-caption); letter-spacing:var(--sv-caption-track); text-transform:uppercase; color:var(--sv-text-muted); }
.sv-live{ display:inline-flex; align-items:center; gap:6px; font:var(--sv-t-caption); letter-spacing:var(--sv-caption-track); text-transform:uppercase; color:var(--sv-red); }
.sv-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sv-red); animation:sv-live 2.4s ease-out infinite; }
@keyframes sv-live{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--sv-red) 45%, transparent); } 70%{ box-shadow:0 0 0 6px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion:reduce){ .sv-live::before{ animation:none; } }

/* ============================================================================================
   V2-A · TYPOGRAPHY ROLES applied to the Room OS surfaces
   The dock computed 8–12 distinct font sizes per pane (audit §4). Every text the surfaces show
   now resolves to one of the roles above; nothing a person reads sits below 12.5 px.
   ============================================================================================ */
.lrd-dock, #lrhub, #lrdm{ font-family:var(--sv-font-ui); }

/* the dock: head, tabs, panes, feed, composer */
.lrd-dock .lrd-rn{ font:var(--sv-t-panel); color:var(--sv-text-primary); }
.lrd-dock .lrd-sub{ font:var(--sv-t-meta); color:var(--sv-text-muted); }
.lrd-tab{ font:var(--sv-t-label); }
.lrd-tab .lrd-tc{ font:var(--sv-t-caption); }
.lrd-livebadge{ font:var(--sv-t-caption); letter-spacing:var(--sv-caption-track); }
.lrd-body{ font:var(--sv-t-body); }
.lrd-ev, .lrd-rnote{ font:var(--sv-t-secondary); }
.lrd-dock.lrd-offline::before{ font:var(--sv-t-meta); }
.lrd-rsec-h{ font:var(--sv-t-caption); letter-spacing:var(--sv-caption-track); text-transform:uppercase; }

/* the feed: bubble, name, time, system lines, day marker */
.lrm-bub{ font:var(--sv-t-body); }
.lrm-nm{ font:var(--sv-t-meta); }
.lrm-t{ font:var(--sv-t-caption); letter-spacing:0; text-transform:none; }
.lrm.evt .lrm-act{ font:var(--sv-t-meta); }
.lrm-sys span, .lrm-day span{ font:var(--sv-t-caption); letter-spacing:var(--sv-caption-track); text-transform:uppercase; }
.lrm-bub.jumbo .lrm-tx{ font-size:30px; line-height:1.2; }                     /* an emoji-only message stays big: it is content */

/* the composer: the body role, and a height that is a target, not a side effect of a line-height */
.lrd-comp input, .lrd-comp textarea, #lrdChatIn{ font:var(--sv-t-body); min-height:var(--sv-target); }
@media (pointer:coarse){ .lrd-comp input, .lrd-comp textarea, #lrdChatIn{ min-height:var(--sv-target-touch); } }

/* the hub: brand, live pill, search, rows */
.lrh-brand{ font:var(--sv-t-panel); letter-spacing:.2px; }
.lrh-live{ font:var(--sv-t-caption); letter-spacing:var(--sv-caption-track); }
.lrh-search input{ font:var(--sv-t-body); }
.lrh-subnow{ font:var(--sv-t-meta); }
.lr-row2 .lr-sym{ font:var(--sv-t-numeric); }
.lr-row2 .lr-nm b{ font:var(--sv-t-card); }
.lr-row2 .lr-nm span{ font:var(--sv-t-meta); }
.lr-row2 .lr-on{ font:var(--sv-t-numeric); font-weight:600; }
.lr-bdg{ font:var(--sv-t-caption); letter-spacing:var(--sv-caption-track); text-transform:uppercase; }
.lr-rlive{ font:var(--sv-t-caption); letter-spacing:var(--sv-caption-track); text-transform:uppercase; }
.lrh-sechead h2{ font:var(--sv-t-panel); }

/* ============================================================================================
   V2-A · SURFACES, RADIUS, ELEVATION, Z — the same values, named; the few that change, on purpose
   ============================================================================================ */
.lrd-dock{ background:var(--sv-surface-0); z-index:var(--sv-z-floating); }
.lrd-dock.lrd-dock-free, .lrd-dock.lrd-dock-max{ box-shadow:var(--sv-el-floating); }
.lrd-tab{ border-radius:var(--sv-r-s); }
.lrd-tab.on{ background:var(--sv-red-soft); border-color:var(--sv-red-line); }
.lrd-m{ border-radius:var(--sv-r-s); }
.lrm-bub{ background:var(--sv-surface-1); border-color:var(--sv-border-subtle); border-radius:var(--sv-r-m); box-shadow:none; }
.lrm.out .lrm-bub{ background:var(--sv-red-soft); border-color:var(--sv-red-line); }
.lrm-img{ border-radius:var(--sv-r-s); }
.lrm-pin{ border-radius:var(--sv-r-m); }
.lrm-sys span{ border-radius:var(--sv-r-pill); }
.lrm-day span{ border-radius:var(--sv-r-pill); background:var(--sv-surface-1); }
#lrhub{ z-index:var(--sv-z-menu); }
.lrh-panel{ border-radius:var(--sv-r-l); box-shadow:var(--sv-el-overlay); background:var(--sv-surface-0); }
.lrh-search{ border-radius:var(--sv-r-m); background:var(--sv-surface-1); }
.lrh-search:focus-within{ border-color:var(--sv-border-active); box-shadow:0 0 0 3px var(--sv-red-soft); }
.lr-row2{ background:var(--sv-surface-1); border-radius:var(--sv-r-m);
  transition:border-color var(--sv-normal) var(--sv-ease), background var(--sv-normal) var(--sv-ease); }
.lr-row2:hover{ border-color:var(--sv-border-active); background:var(--sv-surface-2); }

/* destructive controls: the danger hue, never the brand red and never the price red */
.lrd-head .lrd-hb.danger:hover{ border-color:var(--sv-danger); color:var(--sv-danger); }

/* one focus ring on every Room OS control, keyboard only */
.lrd-dock :is(button, input, textarea, select, [tabindex]):focus-visible,
#lrhub :is(button, input, textarea, select, [tabindex]):focus-visible,
#lrdm :is(button, input, textarea, select, [tabindex]):focus-visible{ outline:none; box-shadow:var(--sv-focus); }

/* motion tokens on the surfaces that already animate */
.lrd-tab{ transition:background var(--sv-fast) var(--sv-ease), color var(--sv-fast) var(--sv-ease), border-color var(--sv-fast) var(--sv-ease); }
@media (prefers-reduced-motion:reduce){ .lrd-tab, .lr-row2{ transition:none; } }

/* ============================================================================================
   V2-I · REDUCED MOTION, IN ONE PLACE. The motion tokens collapse, so every transition and
   animation written against them - every tranche - completes at once, and nothing has to remember
   to opt out. Rules that name a duration outside the tokens keep their own guards.
   ============================================================================================ */
@media (prefers-reduced-motion:reduce){ :root{ --sv-fast:0ms; --sv-normal:0ms; --sv-panel:0ms; --sv-modal:0ms; } }