/* fonts: DM Sans for reading, Fredoka for the chunky headings (both SIL Open Font License, bundled so the game works offline) */
@font-face{font-family:"DM Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/dm-sans-400.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/dm-sans-500.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/dm-sans-700.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/fredoka-600.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/fredoka-700.woff2) format("woff2")}

/* BOPPi theme tokens: playful tabletop. Light is the default, dark follows the device (or data-theme="dark" / "light"). */
:root {
  color-scheme: light;
  --ova-background: #fff3e6;
  --ova-surface: #fffdf7;
  --ova-ink: #1f1b24;
  --ova-text-muted: #5a6578;
  --ova-accent: #ff4f7b;
  --ova-accent-ink: #c4123a;
  --ova-border: #dccaa6;
  --ova-control-border: #5b6a82;
  --ova-strong: #1f1b24;          /* high-contrast fills (selected pills, primary buttons) */
  --ova-on-strong: #ffffff;
  --ova-night: #64235e;           /* always-dark surfaces: overlays, toasts, card backs */
  --ova-sweet: #49a894;
  --ova-sweet-surface: #d9f2ec;
  --ova-sweet-ink: #1d6a58;
  --ova-cheeky: #f0b63f;
  --ova-cheeky-surface: #ffefc2;
  --ova-cheeky-ink: #7a5200;
  --ova-spicy: #a35aca;
  --ova-spicy-surface: #f1e1fa;
  --ova-spicy-ink: #6e2c93;
  --ova-success: #1f7a5c;
  --ova-error: #c23b3b;
  --ova-font: 'DM Sans', ui-rounded, system-ui, sans-serif;
  --ova-display: 'Fredoka', 'DM Sans', ui-rounded, system-ui, sans-serif;
  --ova-space-1: 4px;
  --ova-space-2: 8px;
  --ova-space-3: 12px;
  --ova-space-4: 16px;
  --ova-space-6: 24px;
  --ova-space-8: 32px;
  --ova-space-12: 48px;
  --ova-radius-control: 16px;
  --ova-radius-panel: 22px;
  --ova-radius-card: 26px;
  --ova-shadow-card: 0 4px 0 rgb(38 52 74 / 90%);
  --ova-shadow-soft: 0 10px 24px rgb(38 52 74 / 14%);
  --ova-duration: 180ms;
  --ova-content-width: 480px;
}
/* dark: still a game table, not a black void. Cards, packs and the card backs keep their cream faces. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ova-background: #19233a;
    --ova-surface: #24324d;
    --ova-ink: #fff4df;
    --ova-text-muted: #b6c0d3;
    --ova-accent-ink: #ff9a7c;
    --ova-border: #3a4b6c;
    --ova-control-border: #8795b0;
    --ova-strong: #fff4df;
    --ova-on-strong: #26344a;
    --ova-sweet-surface: #1f4a44;
    --ova-sweet-ink: #8fe3cf;
    --ova-cheeky-surface: #4d3b12;
    --ova-cheeky-ink: #ffd982;
    --ova-spicy-surface: #3f2656;
    --ova-spicy-ink: #dcaef5;
    --ova-success: #6fd9b0;
    --ova-error: #ff8a8a;
    --ova-shadow-card: 0 4px 0 rgb(0 0 0 / 55%);
    --ova-shadow-soft: 0 10px 24px rgb(0 0 0 / 35%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ova-background: #19233a; --ova-surface: #24324d; --ova-ink: #fff4df; --ova-text-muted: #b6c0d3; --ova-accent-ink: #ff9a7c;
  --ova-border: #3a4b6c; --ova-control-border: #8795b0; --ova-strong: #fff4df; --ova-on-strong: #26344a;
  --ova-sweet-surface: #1f4a44; --ova-sweet-ink: #8fe3cf; --ova-cheeky-surface: #4d3b12; --ova-cheeky-ink: #ffd982;
  --ova-spicy-surface: #3f2656; --ova-spicy-ink: #dcaef5; --ova-success: #6fd9b0; --ova-error: #ff8a8a;
  --ova-shadow-card: 0 4px 0 rgb(0 0 0 / 55%); --ova-shadow-soft: 0 10px 24px rgb(0 0 0 / 35%);
}
/* things that are physical objects keep the light palette in either theme */
.card, .cv-card, #serve-card, .pbox, .face {
  --ova-ink: #26344a; --ova-text-muted: #5a6578; --ova-background: #fff4df; --ova-surface: #fffaee; --ova-border: #dccaa6;
  --ova-accent-ink: #b83a1b;
  --ova-sweet-surface: #d9f2ec; --ova-sweet-ink: #1d6a58; --ova-cheeky-surface: #ffefc2; --ova-cheeky-ink: #7a5200;
  --ova-spicy-surface: #f1e1fa; --ova-spicy-ink: #6e2c93; --ova-success: #1f7a5c;
}
@media (prefers-reduced-motion: reduce) {
  :root { --ova-duration: 0ms; }
}