/* ═══════════════════════════════════════════════════════
   Media Centre — shared design tokens + base reset.

   Single source of truth for the palette. Loaded by
   dashboard.html, login.html and settings.html; page-specific
   rules live in dashboard.css / login.css / settings.css.

   To reshade the whole app, change the four hues below —
   every dim/border variant is derived from them via color-mix.
   ═══════════════════════════════════════════════════════ */
:root {
  /* ── Surfaces ── */
  --bg:         #141416;
  --surface:    #1a1a1d;
  --surface-2:  #202024;
  --border:     #2c2c31;
  --border-lt:  #38383f;

  /* ── Text (all ≥ 4.5:1 on every surface above) ── */
  --text:       #edecf1;
  --text-2:     #a8a7b0;
  --text-3:     #7c7b84;

  /* ── Accent + semantics (the four source hues) ── */
  --accent:     #7c86ff;
  --ok:         #68b98a;
  --warn:       #d0a75a;
  --danger:     #dc5b52;

  /* ── Derived tints — never hardcode these as literals ── */
  --accent-dim:    color-mix(in srgb, var(--accent) 14%, transparent);
  --ok-dim:        color-mix(in srgb, var(--ok)     14%, transparent);
  --warn-dim:      color-mix(in srgb, var(--warn)   14%, transparent);
  --danger-dim:    color-mix(in srgb, var(--danger) 14%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 35%, transparent);

  /* ── Type scale (6 steps, no one-offs) ── */
  --fs-xs:      0.75rem;    /* 12px — smallest permitted */
  --fs-sm:      0.8125rem;  /* 13px */
  --fs-base:    0.9375rem;  /* 15px */
  --fs-lg:      1.125rem;   /* 18px */
  --fs-xl:      1.5rem;     /* 24px */
  --fs-2xl:     2rem;       /* 32px */

  /* ── Spacing / shape ── */
  --gap:        1rem;
  --gap-lg:     1.5rem;
  --radius:     10px;
  --radius-sm:  7px;
  --tap:        44px;       /* minimum touch target */
  --row-h:      4.25rem;   /* paired Requests / Indexers row height */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}