/* ========================================
   The Band Plan — design tokens (canonical)
   Phase 0: load before main.css.
   Marketing / redesign surfaces use these names.
   Prod aliases stay in main.css :root for now so the
   rest of the app does not flip blue→red globally.
   See mds/redesign-token-map.md
   ======================================== */

:root {
  /* Canonical redesign1 (community hub / solo-journey) */
  --bg: #191919;
  --surface: #1a1a1a;
  --surface-2: #242424;
  --surface-3: #2d2d2d;
  --border: #3a3a3a;
  --border-subtle: #2d2d2d;
  --border-hover: #555555; /* mockup song-row / interactive lift */
  --text: #d4d4d4;
  --gray: #b0b0b0;
  --muted: #888888;
  --red: #cc0000;
  --red-dim: #991000;
  --selected: #3a1010;
  --success: #28a745;
  --success-dim: #1e7e34;
  --warn: #ffc107;

  /* Marketing accents (alias brand red) — Record / scarce accent, not primary CTA */
  --solo: var(--red);
  --solo-dim: rgba(204, 0, 0, 0.22);

  /*
   * Semantic → paint bridge (redesign1 branch — global).
   * Keep Bootstrap/classes semantic (primary / success / danger…);
   * remap paint here. See master plan §9 “Semantic classes vs paint”.
   * Primary / danger = brand red. Success paint = secondary chrome (designer).
   * Raw --success green kept for intentional accents (e.g. catalog “saved”).
   */
  --color-primary: var(--red);
  --color-primary-dark: var(--red-dim);
  --color-success: var(--gray);
  --bs-primary: var(--red);
  --bs-primary-rgb: 204, 0, 0;
  --bs-link-color: var(--gray);
  --bs-link-hover-color: var(--text);
  --bs-success: var(--gray);
  --bs-success-rgb: 176, 176, 176;
  /* Danger / record — brand red */
  --danger: var(--red);
  --bs-danger: var(--red);
  --bs-danger-rgb: 204, 0, 0;
  /* Secondary paint = panel chrome (speed-btn recipe); not Bootstrap gray */
  --bs-secondary: var(--surface-3);
  --bs-secondary-rgb: 45, 45, 45;

  /* Type */
  --font-display: "Bebas Neue", sans-serif;
  --font-body: Inter, system-ui, sans-serif;

  /* Space scale — prefer these over one-off padding/gap/margin */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-13: 36px;
  --space-14: 40px;
  --space-15: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Panel kit (structure — paint stays --surface*) */
  --panel-bg: var(--surface-2);
  --panel-bg-muted: var(--surface-3);
  --panel-border: var(--border-width) solid var(--border);
  --panel-radius: var(--radius-lg);
  --panel-pad: var(--space-8) var(--space-9);
  --panel-pad-sm: var(--space-4) var(--space-6);
  --panel-pad-lg: var(--space-13) var(--space-10);
  --card-radius: var(--radius-md);
  --card-pad: var(--space-8) var(--space-7);
  --row-radius: var(--radius-md);
  --row-pad: var(--space-4) var(--space-6);
  --gap-tight: var(--space-1);
  --gap-sm: var(--space-2);
  --gap-md: var(--space-5);
  --gap-lg: var(--space-7);
  --gap-xl: var(--space-9);

  /* Overlays (hero / photo chapters) — keep rgba in tokens, not in pages */
  --overlay-scrim: rgba(10, 10, 10, 0.9);
  --overlay-scrim-mid: rgba(10, 10, 10, 0.55);
  --overlay-scrim-strong: rgba(10, 10, 10, 0.72);
  --overlay-scrim-soft: rgba(10, 10, 10, 0.35);
  --overlay-scrim-bottom: rgba(10, 10, 10, 0.7);
  --overlay-photo: rgba(12, 12, 12, 0.55);
  --overlay-photo-mid: rgba(12, 12, 12, 0.62);
  --overlay-features-top: rgba(12, 12, 12, 0.82);
  --overlay-features-mid: rgba(12, 12, 12, 0.72);
  --overlay-features-bottom: rgba(12, 12, 12, 0.88);
  --overlay-nav: rgba(0, 0, 0, 0.55);
  --overlay-black-35: rgba(0, 0, 0, 0.35);
  --overlay-black-45: rgba(0, 0, 0, 0.45);
  --overlay-black-5: rgba(0, 0, 0, 0.5);
  --overlay-black-72: rgba(0, 0, 0, 0.72);
  --overlay-black-88: rgba(0, 0, 0, 0.88);
  --overlay-white-14: rgba(255, 255, 255, 0.14);
  --overlay-white-28: rgba(255, 255, 255, 0.28);
  --overlay-white-35: rgba(255, 255, 255, 0.35);
  --overlay-white-55: rgba(255, 255, 255, 0.55);
  --overlay-white-65: rgba(255, 255, 255, 0.65);
  --overlay-white-7: rgba(255, 255, 255, 0.7);
  --overlay-white-75: rgba(255, 255, 255, 0.75);
  --overlay-white-78: rgba(255, 255, 255, 0.78);
  --overlay-white-82: rgba(255, 255, 255, 0.82);
  --overlay-white-85: rgba(255, 255, 255, 0.85);
  --overlay-white-88: rgba(255, 255, 255, 0.88);
  --overlay-white-8: rgba(255, 255, 255, 0.8);
  --overlay-white-92: rgba(255, 255, 255, 0.92);
  --overlay-card: rgba(26, 26, 26, 0.88);
  --overlay-frame: rgba(12, 12, 12, 0.72);
  --overlay-close: rgba(20, 20, 20, 0.9);
  --overlay-black-8: rgba(0, 0, 0, 0.8);

  /* Third-party brand (OAuth) */
  --brand-facebook: #1877f2;
}