/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Loop Player theme tokens — dark rail, light application.

   The sidebar is dark and the content is light, which is the arrangement most admin software
   settles on: the rail carries navigation context, the content area carries data that has to be
   read for hours. The two halves therefore need two palettes, and the --sidebar-* family at the
   foot of this file is deliberately separate so a change to one can never leak into the other.

   EVERY COLOUR HERE WAS MEASURED against WCAG 2.1 before it was chosen — 4.5:1 for text, 3:1 for
   a border or icon that carries meaning. The dark theme this replaced had been tuned the same way,
   and almost none of its values survived the move: a colour that reads well on #06111E is, as a
   rule, invisible on #F7F9FB.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────────────────────────
     Elevation now runs TOWARD white: the page is faintly tinted and anything raised above it is
     pure white. The dark theme ran the other way, and that inversion is why --bg-hover below had
     to be split out.
     ─────────────────────────────────────────────────────────────────────────────────────────── */
  --bg-primary: #F7F9FB;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --bg-input: #FFFFFF;

  /*
   * Interactive tint, and the reason it exists.
   *
   * On dark, "raised surface" and "hovered surface" are the same gesture — both lighten — so one
   * token served both. On light they move in opposite directions: a tile raised off the page goes
   * WHITE, a row under the cursor goes GREY. Left as one token, every hover on a white card was
   * white on white and simply stopped existing.
   */
  --bg-hover: #F1F5F9;

  /* ── Brand ────────────────────────────────────────────────────────────────────────────────
     TWO GREENS, because one cannot do both jobs on a light page.
     #20DF91 measures 1.75:1 on white — it fails as text and fails again as a border, where the
     bar is only 3:1. But as a SURFACE it is not being read: a filled button in that green with
     --accent-on text measures 9.5:1, so the brand keeps its brightness exactly where the brand is
     most visible. Anything the eye reads as ink uses --accent-ink instead.
     ─────────────────────────────────────────────────────────────────────────────────────────── */
  --accent: #20DF91;
  --accent-hover: #18C57F;
  --accent-dim: #0E9C61;
  --accent-on: #04231A;

  /* Green as INK: text, active tabs, links, icons, focus rings. 5.48:1 on white. */
  --accent-ink: #047857;

  /* ── Text ─────────────────────────────────────────────────────────────────────────────────
     16.9:1 / 7.2:1 / 4.5:1 against the page. The muted step is exactly at the AA line rather than
     comfortably past it, which is deliberate: any lighter and the three-level hierarchy collapses
     into two, and 11px uppercase labels are the place that damage shows first.
     ─────────────────────────────────────────────────────────────────────────────────────────── */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;

  /* ── Status ───────────────────────────────────────────────────────────────────────────────
     Not one of these survived the move. #22C55E measured 2.28:1 on a white card, #F59E0B measured
     2.15:1 — both were legible on the old dark ground and both became decoration on this one. The
     hues are held and the lightness is dropped until each passes as text.

     They stay off the brand hue on purpose: green now MEANS the product, so a green "success" and
     a green primary button stop being distinguishable from each other.
     ─────────────────────────────────────────────────────────────────────────────────────────── */
  --success: #15803D;
  --success-dim: #DCFCE7;
  --danger: #B42318;
  --danger-dim: #FEE4E2;
  --warning: #B45309;
  --warning-dim: #FEF0C7;

  /*
   * --info had been REFERENCED eight times and defined nowhere.
   *
   * Every one of those uses fell through to its literal fallback, #3B82F6 — a blue that belongs to
   * the template this project was forked from and to nothing in Loop Player. The app therefore
   * carried a second accent colour that nobody chose. It is defined here, once, in a hue that sits
   * with the palette rather than against it, and used only where a state genuinely is neither good
   * nor bad: a screen awaiting its first contact.
   */
  --info: #1D4ED8;
  --info-dim: #DBEAFE;

  /* ── Borders ──────────────────────────────────────────────────────────────────────────────
     Ink at low alpha rather than a flat grey, so one value sits correctly on the page tint and on
     a white card without needing a second token per surface. The dark theme used translucent
     WHITE for the same reason; on this ground white borders are invisible.
     ─────────────────────────────────────────────────────────────────────────────────────────── */
  --border: rgba(15, 23, 42, 0.10);
  --border-light: rgba(15, 23, 42, 0.18);

  /*
   * Surfaces that stay dark ON PURPOSE.
   *
   * The live player log is a console, and a console is read as one: every terminal in every
   * light-themed tool on the machine is dark, and a wall of monospace on white is harder to scan,
   * not easier. Given tokens so the choice is visible here rather than buried in a literal that
   * looks like something nobody got round to converting.
   */
  --console-bg: #0B1220;
  --console-text: #CBD5E1;

  --radius: 8px;
  --radius-lg: 12px;
  /* Shadows are much softer than the dark theme's. On a dark ground a shadow is read as depth; on
     a light one the same opacity reads as dirt. */
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --transition: 0.2s ease;

  /* ── A PALETA DO RAIL SAIU DAQUI ──────────────────────────────────────────────────────
     Doze variaveis --sidebar-* viviam neste bloco, e main.css as lia para desenhar a barra.

     A barra virou um componente com Shadow DOM (components/loop-sidebar.js), montado pelos
     DOIS modulos a partir desta mesma origem, e ele carrega a propria paleta -- de proposito:
     ler a variavel do hospedeiro faria a barra mudar de cor conforme o modulo, que e o defeito
     que o componente existe para acabar.

     Ficaram aqui doze definicoes que ninguem lia. Uma variavel definida sem leitor e a proxima
     pessoa mudando a cor no lugar errado e nao entendendo por que a tela nao muda.

     --sidebar-width tambem saiu: a largura vive no componente, que esta NO fluxo e ja ocupa o
     espaco. Enquanto a medida existia nos dois lugares, ela foi contada duas vezes e sobrou uma
     faixa vazia de 232px entre a barra e o conteudo.

     Os testes de tema seguiram a paleta: server/test/theme-tokens.test.js le o componente.
     ─────────────────────────────────────────────────────────────────────────────────────── */

}