/* Songle · Setlist tokens v2 (light + dark)
   Fonts: https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap

   Dark mode = screen print on black stock.
   1. Paper and ink swap. Mode inks never change.
   2. Text on a mode ink uses --on-mode, NEVER --ink. In dark, --ink is off-white
      and off-white on pink is 2.6:1 (fails). --on-mode stays #141414 in both themes.
   3. Text on an --ink fill (Guess button, Miss tag) uses --on-ink.
   4. Themes change colors only. Never border width, padding or font weight.
      A pink button keeps its 3px border, colored pink, so nothing shifts on toggle.
   5. The share image always renders light.

   Contrast (dark): ink 15.6:1, grey 7.7:1, muted 5.2:1, divider 3.1:1,
   placeholder on surface 4.7:1, on-mode on every mode ink >= 5.9:1. */

:root {
  color-scheme: light;

  /* Stock and ink */
  --paper: #F3EEE3;      /* page ground */
  --ink: #141414;        /* text, 3px rules, played clips, primary buttons */
  --surface: #FBF9F4;    /* inputs, answer card, share bar */
  --divider: #141414;    /* 1px row lines, locked ladder borders */
  --grey: #5E5D58;       /* skipped rows, meta labels */
  --muted: #6E6D67;      /* locked rows, placeholder */
  --leader: #B5B3AC;     /* dotted leaders */
  --hatch: #BDBBB3;      /* hatch fills */
  --on-ink: var(--paper);
  --on-mode: #141414;    /* text, icons, bars on mode inks, never flips */
  --on-mode-inverse: #F3EEE3;  /* text on an --on-mode fill inside a mode-ink area (Hit tag), never flips */
  --mode-edge: #141414;  /* border around mode-ink fills; transparent in dark so the fill reads full size */

  /* Mode inks: identical in both themes */
  --ink-daily: #00A95C;
  --ink-unlimited: #FFE800;
  --ink-artists: #4A9BFF;    /* the live Artists blue: 6.5:1 against #141414 */
  --ink-2016: #FF48B0;
  --ink-duel: #FF6C2F;
  --ink-countdown: #FF4F45;  /* Countdown clock red: 5.9:1 against #141414 */
  --ink-cup: #B98BFF;        /* Songle Cup violet: 7.2:1 against #141414 */
  --mode-ink: var(--ink-daily);

  /* Type */
  --font-display: 'Anton', sans-serif;
  --font-label: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --tracking-label: 0.06em;

  /* Structure */
  --rule-heavy: 3px solid var(--ink);
  --rule-light: 1px solid var(--divider);
  --radius: 0;
  --touch: 44px;
  --row-mobile: 40px;    /* every row the same height, current and hit included */
  --row-desktop: 56px;
  --clip-bar-max-mobile: 48px;   /* bar width = max * sqrt(clip / longest clip) */
}

/* Dark: follows the OS unless the user picked a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #151412;
    --ink: #EEECE5;
    --surface: #201F1C;
    --divider: #66645E;
    --grey: #A9A7A0;
    --muted: #8A8881;
    --leader: #45433E;
    --hatch: #3A3935;
    --mode-edge: transparent;
  }
}

/* Dark: chosen explicitly via the toggle */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151412;
  --ink: #EEECE5;
  --surface: #201F1C;
  --divider: #66645E;
  --grey: #A9A7A0;
  --muted: #8A8881;
  --leader: #45433E;
  --hatch: #3A3935;
  --mode-edge: transparent;
}

[data-mode="daily"]     { --mode-ink: var(--ink-daily); }
[data-mode="unlimited"] { --mode-ink: var(--ink-unlimited); }
[data-mode="artists"]   { --mode-ink: var(--ink-artists); }
[data-mode="2016"]      { --mode-ink: var(--ink-2016); }
[data-mode="duel"]      { --mode-ink: var(--ink-duel); }
[data-mode="cup"]       { --mode-ink: var(--ink-cup); }
[data-mode="countdown"] { --mode-ink: var(--ink-countdown); }

html, body { background: var(--paper); color: var(--ink); }

/* Misregistered wordmark: shadow offset = font-size / 16 */
.wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.85;
  color: var(--ink);
  text-shadow: calc(1em / 16) calc(1em / 16) 0 var(--mode-ink);
}

.hatch {
  background-image: repeating-linear-gradient(
    135deg, transparent 0 6px, var(--hatch) 6px 8px
  );
}

/* Anything filled with the mode ink. Background stays under a transparent
   border (background-clip: border-box), so the fill keeps its full size in dark. */
.on-mode-ink {
  background: var(--mode-ink);
  color: var(--on-mode);
  border-color: var(--mode-edge);
}

/* Focus: offset so the ring sits on paper, visible next to ink and mode fills */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}