@font-face {
  font-family: "National Park";
  src: url("/assets/fonts/NationalPark-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Park";
  src: url("/assets/fonts/NationalPark-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Park";
  src: url("/assets/fonts/NationalPark-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Park";
  src: url("/assets/fonts/NationalPark-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Park";
  src: url("/assets/fonts/NationalPark-Bold.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F4ECDB;
  --ink:   #1A1714;
  --p1:    #E04040;
  --p2:    #1F4C66;
  --p3:    #FCB448;

  --max:    1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 14px;

  --display: "National Park", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "National Park", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:    "Caveat", "Bradley Hand", cursive;

  --fade: 2400ms;
  --ease: cubic-bezier(.65, .05, .35, 1);

  --status-green: #2F8F4A;
  --status-amber: #E4A636;
  --status-red:   #C8362C;

  /* Text-on-accent fallbacks. Each palette in tokens.css can override
   * these per-palette so a component sitting on var(--p1) / --p2 / --p3
   * picks the right text color for that palette. The root defaults
   * mirror the historical hard-coded values: paper text on p1 / p2,
   * ink text on p3. */
  --on-p1: var(--paper);
  --on-p2: var(--paper);
  --on-p3: var(--ink);
}

/* 5 palettes — beachy, warm, fun, but designed to read well at every step.
   Each one moves enough hue to feel different, but stays in the same warm/earthy
   family so the page-wide transition is never jarring. */

/* Neon Pink Motel — pink lead, cream base, navy/teal supports. Fun but not Barbie chaos. */
   body[data-palette="neon-pink-motel"] {
     --paper: #FFF0DC;
     --ink:   #171219;
   
     --p1:    #F51A8A; /* neon pink */
     --p2:    #243B53; /* deep motel/navy */
     --p3:    #007C6E; /* dark sea-glass teal */
   
     --on-p1: #171219;
     --on-p2: #FFF0DC;
     --on-p3: #FFF0DC;
   }
   
   /* Electric Blue Freezer — electric blue lead, cold paper, warm taproom amber. */
   body[data-palette="electric-blue-freezer"] {
     --paper: #EEF7FF;
     --ink:   #101923;
   
     --p1:    #005CFF; /* electric blue */
     --p2:    #006D77; /* deep freezer teal */
     --p3:    #FFB000; /* amber sign glow */
   
     --on-p1: #EEF7FF;
     --on-p2: #EEF7FF;
     --on-p3: #101923;
   }
   
   /* Hazard Orange Pier — dark workwear palette with safety-orange signage. */
   body[data-palette="hazard-orange-pier"] {
     --paper: #17140F;
     --ink:   #FFF0D8;
   
     --p1:    #FF6A00; /* hazard orange */
     --p2:    #4FD1C5; /* oxidized pier light */
     --p3:    #FFE156; /* sodium/beach light */
   
     --on-p1: #17140F;
     --on-p2: #17140F;
     --on-p3: #17140F;
   }
   
   /* Acid Lime After Dark — moved to dark background so the lime actually works. */
   body[data-palette="acid-lime-after-dark"] {
     --paper: #071A16;
     --ink:   #F3F5D7;
   
     --p1:    #B6FF00; /* acid lime */
     --p2:    #00D0C6; /* electric aqua */
     --p3:    #FF4F9A; /* controlled neon raspberry */
   
     --on-p1: #071A16;
     --on-p2: #071A16;
     --on-p3: #071A16;
   }
   
   /* Ultraviolet Boardwalk — purple lead, green support, gold ticket-booth accent. */
   body[data-palette="ultraviolet-boardwalk"] {
     --paper: #F2EAF8;
     --ink:   #181326;
   
     --p1:    #6B2DFF; /* ultraviolet */
     --p2:    #007A5E; /* boardwalk green */
     --p3:    #E3A800; /* prize-ticket gold */
   
     --on-p1: #F2EAF8;
     --on-p2: #F2EAF8;
     --on-p3: #181326;
   }
   
   
@media (prefers-reduced-motion: reduce) {
  :root { --fade: 1ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}