/* SAMBOX PLAYER — design tokens (mirrors /docs/03-design-tokens.json)
   Stack: vanilla JS + SCSS + Vite 8. Backend /api/v1 FROZEN — no new fields. */
:root {
  --brand: "SAMBOX PLAYER";
  --terms-version: "v1.0";

  /* admin dark (Gentelella v4) */
  --admin-bg: #111417;
  --admin-surface: #1a1e24;
  --admin-sidebar: #171b21;
  --admin-sidebar-active: #1abb9c;
  --admin-border: #2a3139;
  --admin-text: #e8edf2;
  --admin-muted: #9aa7b4;
  --admin-link: #9ecbff;

  /* reseller dark (Gentelella v4) */
  --reseller-bg: #14161a;
  --reseller-surface: #1b1e24;

  /* client light (Netflix/Disney+ neutral) */
  --client-bg: #f6f7f9;
  --client-surface: #ffffff;
  --client-hero-bg: #000000;
  --client-hero-text: #ffffff;
  --client-border: #e2e6ea;
  --client-text: #111418;
  --client-muted: #5b6570;

  /* accent + semantic */
  --accent: #1abb9c;
  --accent-hover: #17a78a;
  --accent-2: #3498db;
  --success: #1abb9c;
  --warning: #f39c12;
  --danger: #e74c3c;
  --info: #3498db;
  --focus-ring: #9ecbff;

  /* type / space / radius */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lh: 1.5;
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 20px; --sp-xxl: 24px; --sp-xxxl: 32px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px;

  /* layout */
  --sidebar-w: 250px;
  --topnav-h: 57px;

  /* motion */
  --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 350ms;
}

/* ---- theme system (dark default, light override) ----
   Pages keep their authored (dark) inline styles; the light layer below
   restyles every shared component via variables + attribute selectors,
   so one toggle repaints all panels with no per-page rewrites. */
:root,
[data-theme="dark"] {
  --bg-primary: #0f1115;
  --bg-secondary: #1a1d24;
  --bg-card: #1e2229;
  --bg-topnav: #000000;
  --bg-sidebar: #171b21;
  --text-primary: #e6e8ec;
  --text-muted: #8a9099;
  --border: #2a2f38;
  --accent: #2dd4a7;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;
}

[data-theme="light"] {
  --bg-primary: #f5f6f8;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-topnav: #ffffff;
  --bg-sidebar: #ffffff;
  --text-primary: #1a1d24;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --accent: #14b8a6;
  --danger: #dc2626;
  --warning: #d97706;
  --success: #059669;
}

/* Base page paint: variables win over per-page hardcoded body colors,
   in BOTH themes, including main/content wrappers. */
html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
}
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .gx-body,
[data-theme="dark"] .cx-wrap {
  background: var(--bg-primary);
  color: var(--text-primary);
}
[data-theme="light"] body,
[data-theme="light"] html,
[data-theme="light"] main,
[data-theme="light"] .main-content,
[data-theme="light"] .content-wrapper,
[data-theme="light"] .gx-body,
[data-theme="light"] .cx-wrap {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Light-theme restyle of the dark-authored components (all panels). */
[data-theme="light"] body { background: var(--bg-primary); color: var(--text-primary); }
[data-theme="light"] .gx-topnav,
[data-theme="light"] .cx-topnav { background: var(--bg-topnav); color: var(--text-primary); border-bottom: 1px solid var(--border); }
[data-theme="light"] .gx-side { background: var(--bg-sidebar); border-right: 1px solid var(--border); }
[data-theme="light"] .gx-side a { color: #0f766e; }
[data-theme="light"] .gx-side a:hover { background: #f0fdfa; }
[data-theme="light"] .gx-side a[aria-current="page"] { background: #f0fdfa; border-left-color: var(--accent); color: var(--text-primary); }
[data-theme="light"] .gx-menu-title,
[data-theme="light"] .gx-profile div div:last-child { color: var(--text-muted); }
[data-theme="light"] .x_panel,
[data-theme="light"] .gx-tile,
[data-theme="light"] .gx-credit,
[data-theme="light"] .cx-card,
[data-theme="light"] .cx-tile,
[data-theme="light"] table.table { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .gx-table td, [data-theme="light"] .gx-table th,
[data-theme="light"] .table td, [data-theme="light"] .table th { border-color: var(--border); }
[data-theme="light"] .gx-table th, [data-theme="light"] .table th { color: var(--text-muted); }
[data-theme="light"] .x_title { border-color: var(--border); }
[data-theme="light"] .gx-tile .k,
[data-theme="light"] label,
[data-theme="light"] .cx-card p { color: var(--text-muted); }
[data-theme="light"] .gx-tile .v { color: var(--text-primary); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea,
[data-theme="light"] .gx-input { background: #fff; color: var(--text-primary); border-color: var(--border); }
[data-theme="light"] .gx-badge { color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] code { background: #eef2f7; color: var(--text-primary); }
[data-theme="light"] .modal > div { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] nav.cx-nav { background: var(--bg-secondary); border-color: var(--border); }
[data-theme="light"] nav.cx-nav a { color: var(--text-primary); }
[data-theme="light"] nav.cx-nav a:hover { background: #eef2f7; }
[data-theme="light"] .status.trial { color: var(--warning); }
[data-theme="light"] .status.active { color: var(--success); }
[data-theme="light"] .status.expired, [data-theme="light"] .status.blocked { color: var(--danger); }