/* Theme: Sticker Pop. Colours, font and outline style only. Layout lives in style.css,
 * so another game can reuse the structure with a different theme file. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bg: #FFF1D0;
  --dot: rgba(26, 26, 46, 0.16);
  --card: #FFFFFF;
  --ink: #1A1A2E;
  --muted: #4A4A63;
  --border: #1A1A2E;
  --shadow-c: #1A1A2E;
  --track: #E9DFC4;

  --pink: #FF4F9A;
  --yellow: #FFD23F;
  --blue: #3D5AFE;
  --mint: #22C7A9;
  --on-bright: #1A1A2E;
  --on-blue: #FFFFFF;
  --field-bg: #FFFFFF;
  --miss-bg: #1A1A2E;
  --miss-ink: #FFFFFF;
  --good-ink: #0A6B55;
  --bad-ink: #B3123F;

  --bw: 3px;
  --r: 22px;
  --hs: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #17172B;
    --dot: rgba(246, 241, 228, 0.10);
    --card: #22223D;
    --ink: #F6F1E4;
    --muted: #B9B9D3;
    --border: #F6F1E4;
    --shadow-c: #000000;
    --track: #34345C;
    --miss-bg: #0C0C18;
    --miss-ink: #F6F1E4;
    --good-ink: #5EE3C4;
    --bad-ink: #FF8FB5;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17172B;
  --dot: rgba(246, 241, 228, 0.10);
  --card: #22223D;
  --ink: #F6F1E4;
  --muted: #B9B9D3;
  --border: #F6F1E4;
  --shadow-c: #000000;
  --track: #34345C;
  --miss-bg: #0C0C18;
  --miss-ink: #F6F1E4;
  --good-ink: #5EE3C4;
  --bad-ink: #FF8FB5;
}