/* Warm paper canvas, coral accent. Ported verbatim from the TREYPIC
   editorial brand board (src/styles/tokens.css). */
:root {
  /* --- Surfaces --- */
  --bg: #faf9f7;
  --bg-warm: #f5f2ee;
  --bg-sunken: #efeae4;
  --ink: #1a1a1a;
  --ink-soft: #3d3a38;
  --ink-light: #8a8a8a;
  --ink-faint: #b6b2ad;
  --hairline: rgba(26, 26, 26, 0.08);
  --hairline-strong: rgba(26, 26, 26, 0.14);

  /* --- Accent --- */
  --accent: #e85d4a;
  --accent-deep: #c9432f;
  --accent-soft: rgba(232, 93, 74, 0.12);
  --accent-veil: rgba(232, 93, 74, 0.28);

  /* --- Support hues (stems, spectrum, data) --- */
  --hue-drums: #e85d4a;
  --hue-bass: #6b5bd6;
  --hue-keys: #2f9e8f;
  --hue-pads: #d99b2b;
  --positive: #22c55e;
  --info: #4a7ee8;

  /* --- Glass --- */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);

  /* --- Semantic aliases --- */
  --text-body: var(--ink-soft);
  --text-heading: var(--ink);
  --text-muted: var(--ink-light);
  --text-faint: var(--ink-faint);
  --text-on-accent: #ffffff;
  --text-on-dark: #f3efe9;
  --surface-page: var(--bg);
  --surface-card: var(--bg-warm);
  --surface-sunken: var(--bg-sunken);
  --surface-glass: var(--glass);
  --surface-rack: #1a1a1a;
  --surface-rack-deep: #14110f;
  --border-subtle: var(--hairline);
  --border-strong: var(--hairline-strong);
  --focus-ring: var(--accent);

  /* --- Rack (inverted) surfaces: the player bar + Studio render panel --- */
  --rack-bg: rgba(16, 14, 13, 0.92);
  --rack-ink: #f3efe9;
  --rack-ink-soft: #d8d2ca;
  --rack-ink-light: #948d86;
  --rack-ink-faint: #5f5851;
  --rack-hairline: rgba(243, 239, 233, 0.12);
  --rack-hairline-strong: rgba(243, 239, 233, 0.2);

  /* --- Cover-art archetype palettes (procedural sleeves) --- */
  --art-lofi-a: #c9764a;
  --art-lofi-b: #8a5a3c;
  --art-lofi-c: #f0dcc4;
  --art-synthwave-a: #7b4bd6;
  --art-synthwave-b: #e8459a;
  --art-synthwave-c: #2a1b4e;
  --art-house-a: #2f9e8f;
  --art-house-b: #1a5f6e;
  --art-house-c: #d6f0e8;
  --art-orchestral-a: #8a3a2e;
  --art-orchestral-b: #d9a84a;
  --art-orchestral-c: #2b1c18;
  --art-westcoast-a: #e8933a;
  --art-westcoast-b: #c9432f;
  --art-westcoast-c: #f5e3c4;
  --art-ambient-a: #5b7bd6;
  --art-ambient-b: #a3c4e8;
  --art-ambient-c: #1a2438;
  --art-drill-a: #3a3a4a;
  --art-drill-b: #6b5bd6;
  --art-drill-c: #0f0f14;

  /* --- Third-party badge colours (sponsored embeds) --- */
  --brand-spotify: #1db954;
  --brand-soundcloud: #ff5500;
}

/* Rack scope. Applied by Panel(rack) and the player bar: the two surfaces in
   the brand that invert, so shared children stay on-brand inside them. */
[data-surface='rack'] {
  --ink: #f3efe9;
  --ink-soft: #d8d2ca;
  --ink-light: #948d86;
  --ink-faint: #5f5851;
  --bg: #1c1917;
  --bg-warm: #241f1c;
  --hairline: rgba(243, 239, 233, 0.12);
  --hairline-strong: rgba(243, 239, 233, 0.2);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
}