/* Setlist Wars v1 — design tokens. Fonts are loaded with <link> in app.html; fallbacks keep the layout sane offline. */

:root {
  --font-display: "Big Shoulders Display", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius: 8px; --radius-s: 5px;
  --bw: 2px;                       /* the "ink line" weight used everywhere */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* LIGHT = "Paper" : a setlist taped to the stage floor */
  --bg: #EFE6D3;          /* paper */
  --surface: #FBF6EA;     /* fresh sheet */
  --surface-2: #E6DBC2;   /* shadowed sheet */
  --ink: #1C1915;         /* marker ink  (15.6:1 on bg) */
  --ink-2: #594F40;       /* secondary   (6.3:1 on bg, 7.1:1 on surface) */
  --line: #1C1915;
  --line-soft: #BDB095;
  --tape: #F2C200;        /* gaffer / hazard yellow; always paired with --on-tape */
  --on-tape: #1C1915;     /* 10.9:1 */
  --like: #0B6E75;        /* "Loud" teal   (5.9:1 vs surface, white text 5.7:1) */
  --on-like: #FFFFFF;
  --hate: #B3261E;        /* "Scrap" red   (6.2:1 vs surface, white text 6:1) */
  --on-hate: #FFFFFF;
  --like-text: #0B6E75;
  --hate-text: #B3261E;
  --focus: #1C1915;
  --shadow: 3px 3px 0 var(--ink);
  --shadow-s: 2px 2px 0 var(--ink);
  --grain-opacity: .35;
  --bar-bg: #1C1915; --bar-fg: #EFE6D3;
}

:root[data-theme="dark"] {
  /* DARK = "Backline" : the stage after the lights go down, paper still glowing */
  --bg: #14120E;
  --surface: #211E17;
  --surface-2: #2C281F;
  --ink: #F3EBDA;        /* 15.5:1 on bg */
  --ink-2: #B9AF9B;      /* 8.1:1 on surface */
  --line: #6E664F;       /* card outlines: 3.1:1 on bg (non-text UI) */
  --line-soft: #3A3529;
  --tape: #F2C200;
  --on-tape: #1C1915;
  --like: #5CD6CB;       /* 10:1 on surface; dark text on fill 10:1 */
  --on-like: #08201E;
  --hate: #FF7B70;       /* 7.6:1 on surface; dark text on fill 7.6:1 */
  --on-hate: #2A0805;
  --like-text: #5CD6CB;
  --hate-text: #FF8A80;
  --focus: #F2C200;
  --shadow: 3px 3px 0 #000;
  --shadow-s: 2px 2px 0 #000;
  --grain-opacity: .12;
  --bar-bg: #000; --bar-fg: #B9AF9B;
}