/* ============================================================
   ControlCenter · Cuberis — design tokens
   The palette and shared scalar tokens, split out of shell.css so
   WebAssetsTest can assert every token the panel uses is defined
   here. Single dark theme. Ported from the analytics «definitivo»
   design. No CSS blur/glass effects anywhere: the panel is flat and
   bordered, not glassmorphism.
   ============================================================ */
:root{
  color-scheme: dark;

  /* Surfaces */
  --bg:#0A0D13; --surface-1:#12161F; --surface-2:#0E121A; --surface-3:#191F29; --surface-4:#26303C;
  --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.12);

  /* Ink */
  --ink-1:#E8EDF5; --ink-2:#C8D0DA; --ink-3:#8491A3; --value:#FFE87A;

  /* Chart chrome */
  --grid:#27313D; --axis:#3C4654;

  /* Categorical series */
  --s1:#00B4FF; --s2:#7BE03C; --s3:#66D2FF; --s4:#FFA42B;
  --s5:#F5495A; --s6:#FFE87A; --s7:#C8D0DA; --s8:#8491A3;

  /* State colours: fixed semantic scale */
  --good:#7BE03C; --warn:#FFA42B; --serious:#F5495A; --crit:#F5495A;

  /* Cuberis identity and the reserved gem colour */
  --brand:#00B4FF; --gem:#55FFFF;

  /* Data direction: positive and negative */
  --pos:#7BE03C; --neg:#F5495A;
  --pos-line:rgba(123,224,60,.3); --pos-faint:rgba(123,224,60,.11);

  /* Tints of the state and accent colours: the same alpha ladder as --pos-*, so a chip, tag or
     callout of any tone reads as one family (line = border, faint = fill). */
  --neg-line:rgba(245,73,90,.32); --neg-faint:rgba(245,73,90,.11);
  --warn-line:rgba(255,164,43,.32); --warn-faint:rgba(255,164,43,.11);
  --brand-line:rgba(0,180,255,.32); --brand-faint:rgba(0,180,255,.11);
  --value-line:rgba(255,232,122,.3); --value-faint:rgba(255,232,122,.1);

  /* Currency transaction tags */
  --tag-rc:#7BE03C; --tag-sp:#F5495A; --tag-tr:#FFE87A; --tag-st:#FFA42B;

  /* Ranking */
  --rank-gold:#FFE87A;

  /* Avatar identity chrome; both tones remain available without gradients */
  --avatar-1:#007FB8; --avatar-2:#005F8C; --avatar-ink:#D9F5FF;

  /* Side faces of the isometric logo */
  --logo-mid:#0073A8; --logo-dark:#005F8C;

  /* Text on the bright brand surface (8.0:1 contrast against #00B4FF). */
  --on-accent:#07131C;

  /* Radius scale */
  --r-card:0.75rem; --r-md:0.5625rem; --r-sm:0.4375rem; --r-pill:999px;
  --r-2:2px; --r-3:0.1875rem; --r-4:0.25rem; --r-5:0.3125rem; --r-6:0.375rem; --r-8:0.5rem;
  --r-10:0.625rem; --r-11:0.6875rem; --r-13:0.8125rem; --r-14:0.875rem; --r-16:1rem;

  /* Measures */
  --side-w:14.75rem;

  /* Form controls: the boundary of an input or select, brighter than a card hairline so a field is
     findable without its fill (WCAG 1.4.11 non-text contrast). */
  --field-line:rgba(255,255,255,.24);

  /* A QR code needs a pure white quiet zone to scan; it is the one white surface in the panel. */
  --qr-bg:#FFFFFF;

  /* Shadows and scrims: only what floats (a tooltip, a dialog) casts one; surfaces at rest are flat. */
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 0.625rem 1.625rem -18px rgba(0,0,0,.9);
  --shadow-pop:0 1.5rem 3.75rem -12px rgba(0,0,0,.75);
  --scrim:rgba(5,7,11,.72);

  /* Typography */
  --font:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
}