/* ============================================================
   StrmrX core.css — shared family chrome + design tokens
   ------------------------------------------------------------
   This file is the StrmrX "--sx-*" design system. It is COPIED
   into each build from strmrx-core, not forked — if the family
   updates it, re-sync rather than diverge.

   A build skins on top of these tokens: it maps the --sx-*
   system onto its own accent/identity and layers app-specific
   component styling. It should never redefine raw palette hexes
   inline. (See the sx-design skill.)
   ============================================================ */

:root {
  /* --- Surfaces (neutral dark base) ------------------------ */
  --sx-bg:           #080808;   /* page background — near black   */
  --sx-bg-2:         #111111;   /* secondary surface — panels     */
  --sx-surface:      #1A1A1A;   /* elevated surface — pills/inputs */

  /* --- Text ----------------------------------------------- */
  --sx-text:         #F0E6D3;   /* primary text — warm off-white  */
  --sx-muted:        #8A7A6A;   /* secondary/muted text           */

  /* --- Brand accent (overridable per-build skin) ---------- */
  --sx-accent:       #C8A96E;   /* primary accent                 */
  --sx-accent-2:     #E8732A;   /* secondary / hot accent         */
  --sx-accent-glow:  #FFB347;   /* glow for text/box shadows      */
  --sx-on-accent:    #080808;   /* text/icon drawn on the accent  */
  --sx-accent-rgb:   200, 169, 110; /* accent as r,g,b for rgba() */

  /* --- Status --------------------------------------------- */
  --sx-success:      #4CAF50;
  --sx-danger:       #E53935;

  /* --- Borders (derived from accent) ---------------------- */
  --sx-border:        rgba(var(--sx-accent-rgb), 0.18);
  --sx-border-active: rgba(var(--sx-accent-rgb), 0.70);

  /* --- Radius scale --------------------------------------- */
  --sx-radius-sm:    8px;
  --sx-radius:       12px;
  --sx-radius-pill:  100px;

  /* --- Spacing scale -------------------------------------- */
  --sx-space-1:      6px;
  --sx-space-2:      10px;
  --sx-space-3:      16px;
  --sx-space-4:      24px;

  /* --- Typography ----------------------------------------- */
  --sx-font-display: 'Bebas Neue', sans-serif;   /* big display  */
  --sx-font-head:    'Oswald', sans-serif;        /* headings     */
  --sx-font-body:    'Nunito', sans-serif;        /* body/inputs  */
  --sx-font-mono:    ui-monospace, 'Cascadia Code', 'Consolas', monospace;
}

/* ============================================================
   Base reset
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   Shared base components — builds layer their skin on top.
   ============================================================ */

/* Pill / chip (category selectors, tags) */
.sx-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-space-1);
  padding: 8px 18px;
  background: var(--sx-surface);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-pill);
  color: var(--sx-muted);
  cursor: pointer;
  font-family: var(--sx-font-body);
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sx-pill:hover {
  border-color: var(--sx-border-active);
  color: var(--sx-text);
}
.sx-pill.active {
  border-color: var(--sx-accent);
  color: var(--sx-accent);
}

/* Primary action button */
.sx-btn {
  border: none;
  border-radius: var(--sx-radius-pill);
  background: linear-gradient(135deg, var(--sx-accent), var(--sx-accent-2));
  color: var(--sx-on-accent);
  cursor: pointer;
  font-family: var(--sx-font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 0.2s ease;
}
.sx-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Elevated surface / card */
.sx-surface {
  background: var(--sx-bg-2);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius);
}

/* Monospace for ids / versions / code-ish chips */
.sx-mono { font-family: var(--sx-font-mono); }