/* ------------------------------------------------------------------
   Azarko Music, token layer (the Sleeve look, decided 30/09/2026).
   Loaded after tokens.css, only on music.azarko.com, and scoped to
   data-brand="azarko" on <html> as well, so it can never change the
   Dubwave look even if it is loaded by mistake. It overrides colour,
   shape and the display face; everything else comes from tokens.css.
   One accent for every crew for now; a colour per crew is for later.
   ------------------------------------------------------------------ */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('/static/fonts/fraunces-500.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('/static/fonts/fraunces-600.woff2') format('woff2'); }

:root[data-brand="azarko"] {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --radius: 20px;
  --radius-sm: 12px;

  /* dark, oxblood */
  --bg: #140c0c;
  --panel: #1f1414;
  --panel-2: #2c2120;
  --line: rgba(243, 233, 220, .10);
  --line-soft: rgba(243, 233, 220, .06);
  --ink: #f3e9dc;
  --ink-2: #cdc3b8;
  --dim: #b3a291;
  --accent: #ef8f7a;
  --accent-ink: #2a0a05;
  --accent-soft: rgba(239, 143, 122, .14);
  --accent-text: #ef8f7a;
  --accent-screen: #ef8f7a;
  --on-bg: var(--accent-soft);
  --on-ink: #f3e9dc;
  --on-line: var(--accent);
  --on-glow: 0 8px 30px -14px rgba(239, 143, 122, .8);
  --screen-bg: #2c2120;
  --screen-ink: #f3e9dc;
  --screen-dim: #b3a291;
  --warn: #f2c84b;
  --err: #ff6b5e;
  --gold: #f2c84b;
}

@media (prefers-color-scheme: light) {
  :root[data-brand="azarko"]:not([data-theme="dark"]) {
    /* light, cream */
    --bg: #efe6d6;
    --panel: #faf5ec;
    --panel-2: #f4eee1;
    --line: #d9d1c9;
    --line-soft: #e7e1d8;
    --ink: #2a1512;
    --ink-2: #584642;
    --dim: #6e5a4c;
    --accent: #8c2a1f;
    --accent-ink: #ffffff;
    --accent-soft: rgba(140, 42, 31, .10);
    --accent-text: #8c2a1f;
    --accent-screen: #ef8f7a;
    --on-bg: var(--accent); --on-ink: #ffffff; --on-line: var(--accent); --on-glow: none;
    --screen-bg: #2a1512;
    --screen-ink: #faf5ec;
    --screen-dim: #aba099;
    --warn: #7a5c05;
    --err: #b6301c;
    --gold: #7a5c05;
  }
}

:root[data-brand="azarko"][data-theme="light"] {
  --bg: #efe6d6; --panel: #faf5ec; --panel-2: #f4eee1;
  --line: #d9d1c9; --line-soft: #e7e1d8;
  --ink: #2a1512; --ink-2: #584642; --dim: #6e5a4c;
  --accent: #8c2a1f; --accent-ink: #ffffff; --accent-soft: rgba(140, 42, 31, .10);
  --accent-text: #8c2a1f; --accent-screen: #ef8f7a;
  --on-bg: var(--accent); --on-ink: #ffffff; --on-line: var(--accent); --on-glow: none;
  --screen-bg: #2a1512; --screen-ink: #faf5ec; --screen-dim: #aba099;
  --warn: #7a5c05; --err: #b6301c; --gold: #7a5c05;
}

/* Contrast, measured. Dark on the panel: ink 15.0:1, ink-2 10.4:1, dim 7.3:1,
   accent as text 7.6:1 (6.6:1 on the display), dark ink on the accent button
   7.8:1. Light on the panel: ink 15.9:1, ink-2 8.2:1, dim 6.0:1 (5.3:1 on the
   ground), accent as text 7.8:1, white on the accent button 8.5:1; on the dark
   display: accent 7.3:1, dim 6.8:1.
   Known weak spot: in a red house style the error colour sits close to the
   accent, so an error must always carry an icon or words, never colour alone.
   The intensity ramp (--i1 to --i5) is not overridden: it belongs to Rate,
   which is Dubwave only for now. */