/* ==========================================================================
   SammsRadio admin v2 tokens (design/admin-v2/DESIGN-ADMIN.md section 3): a dark desktop program.
   Dark only, offline only: no web fonts, no CDNs. The store button keeps its own look: its CSS
   comes from shared/button/button.css with the store app's values as fallbacks, so none of the
   names below are its names.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Surfaces ---------------------------------------------------------- */
  --c-chrome:      #2B2B2B;  /* title bar, status bar, dialog title strip */
  --c-panel:       #3A3A3A;  /* toolbar, Explorer, command panel, track bar sides */
  --c-raised:      #454545;  /* buttons, rollout headers */
  --c-hover:       #505050;
  --c-press:       #313131;
  --c-viewport:    #222324;  /* viewport and dock content */
  --c-tile:        #2C2D2F;
  --c-tile-stage:  #1B1C1D;
  --c-well:        #2A2A2A;  /* inputs, spinners, checklists */
  --c-sep:         #1C1C1C;  /* every 1 px separator */
  --c-bevel:       rgba(255, 255, 255, 0.07);
  --c-row-hover:   rgba(255, 255, 255, 0.055);

  /* ---- Text -------------------------------------------------------------- */
  --c-text:        #E6E6E6;
  --c-text-2:      #C2C2C2;
  --c-muted:       #A6A6A6;
  --c-faint:       #8A8A8A;
  --c-link:        #7DB6F0;
  --c-link-hover:  #A9CFF6;

  /* ---- Selection --------------------------------------------------------- */
  --c-sel:         #4D9BEA;
  --c-sel-fill:    #2C5A86;
  --c-sel-fill-hover: #346A9C;
  --c-sel-soft:    rgba(77, 155, 234, 0.16);

  /* ---- SAMMS red: on air, live (never a problem) -------------------------- */
  --c-red:         #BF3A2B;
  --c-red-hot:     #D84A3A;

  /* ---- Status (always with a shape or a word) ----------------------------- */
  --c-playing:     #5BC88C;
  --c-amber:       #E8A93B;
  --c-problem:     #FF8577;
  --c-waiting:     #9AA9C7;
  --c-paused:      #A6A6A6;
  --c-amber-tint:  rgba(232, 169, 59, 0.13);
  --c-problem-tint: rgba(255, 133, 119, 0.12);

  /* ---- Type -------------------------------------------------------------- */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-code: 26px;

  /* ---- Shape and depth ---------------------------------------------------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --sh-pop: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.7);
  --sh-tile: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.35);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 180ms;
  --t-slow: 250ms;

  /* ---- Layout ------------------------------------------------------------ */
  --h-title: 36px;
  --h-tool: 44px;
  --h-track: 82px;
  --h-status: 26px;
  --w-explorer: 260px;
  --w-cmd: 320px;
  --h-dock: clamp(200px, 38vh, 340px);
}
@media (max-width: 1439px) { :root { --w-explorer: 256px; --w-cmd: 300px; } }
@media (max-width: 1099px) { :root { --w-explorer: 220px; --w-cmd: 280px; } }