/* Pink Penguin Games — "Paper Cut" design tokens. Every page loads this first.
   Fonts (Fredoka, Nunito, Montserrat) come from the Google Fonts <link> in each page's <head>.
   Light/dark: system preference, overridden by data-theme on <html> (set by site.js from localStorage pp-theme). */
:root {
  /* Brand (fixed in both themes) */
  --pp-pink-deep: #C90D5E;
  --pp-pink-deep-hover: #A80A4E;
  --pp-pink-shadow: #8E0842;      /* 3px "pressed paper" under primary buttons */
  --pp-pink-glow: #FF7AA2;
  --pp-coral-blush: #FF9C9C;
  --pp-ink: #1E1838;
  --pp-toast: #2B2240;            /* toasts are ink-on-paper in both themes */
  --pp-gradient: linear-gradient(160deg, #C90D5E, #FF9C9C);

  /* Type */
  --pp-font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --pp-font-body: "Nunito", system-ui, sans-serif;
  --pp-font-brand: "Montserrat", system-ui, sans-serif;
  --pp-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Space (4px base) */
  --pp-space-1: 4px; --pp-space-2: 8px; --pp-space-3: 12px; --pp-space-4: 16px;
  --pp-space-6: 24px; --pp-space-8: 32px; --pp-space-12: 48px; --pp-space-16: 64px;

  /* Shape */
  --pp-radius-tag: 4px;
  --pp-radius-paper: 8px;
  --pp-radius-card: 10px;
  --pp-radius-thumb: 6px;
  --pp-radius-sheet: 22px;
  --pp-radius-pill: 999px;
  --pp-tilt-a: -0.6deg;
  --pp-tilt-b: 0.5deg;

  /* Fixed game surfaces (same in both themes) */
  --pp-felt: #2F7D5A;
  --pp-felt-dark: #23634A;
  --pp-board-light: #F3E3C7;
  --pp-board-dark: #C99E6E;
  --pp-board-frame: #8C6239;
  --pp-card-face: #FFFDF9;
  --pp-card-red: #B8123E;
  --pp-card-black: #2B2240;
  --pp-danger: #B3261E;
  --pp-turn: #FFF3C4;             /* "to move" player panel */
}

:root, [data-theme="light"] {
  --pp-bg: #FFF6F3;
  --pp-paper: #FFFDF9;
  --pp-paper-2: #F8E9E4;
  --pp-text: #2B2240;
  --pp-muted: #4A4560;
  --pp-accent: #C90D5E;
  --pp-fill: #C90D5E;
  --pp-fill-hover: #A80A4E;
  --pp-focus: #C90D5E;
  --pp-line: #D9C6C0;
  --pp-rule: #F1DFDA;
  --pp-edge: #EBD9D4;
  --pp-highlight: #FFF0C2;
  --pp-sheet: 0 1px 0 #EBD9D4, 0 8px 18px rgba(120, 60, 60, .12);
  --pp-sheet-lift: 0 1px 0 #EBD9D4, 0 16px 30px rgba(120, 60, 60, .18);
  --pp-stack: 5px 5px 0 -1px #F7E4DE, 5px 5px 0 0 #EBD9D4;
  --pp-tape: rgba(255, 156, 156, .55);
  --pp-scrim: rgba(43, 34, 64, .45);
  --pp-hill-1: #FFD3DC; --pp-hill-2: #FFB3C3; --pp-hill-3: #F36B95;
  --pp-zone-arcade: #3E5FB8;
  --pp-zone-classics: #2A7062;
  --pp-zone-kids: #9A5F00;
  --pp-zone-bible: #8E5426;
  --pp-danger-text: #B3261E;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pp-bg: #221B33; --pp-paper: #2D2542; --pp-paper-2: #3A3155;
    --pp-text: #FFF8F5; --pp-muted: #C9C1D8; --pp-accent: #FF7AA2; --pp-fill: #C90D5E; --pp-fill-hover: #E0126B;
    --pp-focus: #FF7AA2; --pp-line: #4C4270; --pp-rule: #3A3155; --pp-edge: #3E3458; --pp-highlight: #4A3F1E;
    --pp-sheet: 0 1px 0 #1A1428, 0 8px 18px rgba(0, 0, 0, .35);
    --pp-sheet-lift: 0 1px 0 #1A1428, 0 16px 30px rgba(0, 0, 0, .45);
    --pp-stack: 5px 5px 0 -1px #2A2240, 5px 5px 0 0 #3E3458;
    --pp-tape: rgba(255, 122, 162, .35);
    --pp-scrim: rgba(10, 6, 20, .6);
    --pp-hill-1: #3A2A50; --pp-hill-2: #55305E; --pp-hill-3: #9E2A63;
    --pp-zone-arcade: #9DB4FF; --pp-zone-classics: #7FD3BF; --pp-zone-kids: #F6C95F; --pp-zone-bible: #E8B98A;
    --pp-danger-text: #FF8A80;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --pp-bg: #221B33; --pp-paper: #2D2542; --pp-paper-2: #3A3155;
  --pp-text: #FFF8F5; --pp-muted: #C9C1D8; --pp-accent: #FF7AA2; --pp-fill: #C90D5E; --pp-fill-hover: #E0126B;
  --pp-focus: #FF7AA2; --pp-line: #4C4270; --pp-rule: #3A3155; --pp-edge: #3E3458; --pp-highlight: #4A3F1E;
  --pp-sheet: 0 1px 0 #1A1428, 0 8px 18px rgba(0, 0, 0, .35);
  --pp-sheet-lift: 0 1px 0 #1A1428, 0 16px 30px rgba(0, 0, 0, .45);
  --pp-stack: 5px 5px 0 -1px #2A2240, 5px 5px 0 0 #3E3458;
  --pp-tape: rgba(255, 122, 162, .35);
  --pp-scrim: rgba(10, 6, 20, .6);
  --pp-hill-1: #3A2A50; --pp-hill-2: #55305E; --pp-hill-3: #9E2A63;
  --pp-zone-arcade: #9DB4FF; --pp-zone-classics: #7FD3BF; --pp-zone-kids: #F6C95F; --pp-zone-bible: #E8B98A;
  --pp-danger-text: #FF8A80;
  color-scheme: dark;
}

:focus-visible { outline: 3px dashed var(--pp-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pp-tilt { transform: none !important; }
}