/* ============================================================
   Bright restaurant-menu design tokens
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Pacifico&family=Bagel+Fat+One&family=Lobster&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@500;700&family=Nunito:wght@400;600;800&family=Quicksand:wght@400;500;600;700&family=Recoleta:wght@400;500;700&family=Sniglet:wght@400;800&display=swap");

:root {
  /* BRIGHT candy / diner-menu palette */
  --bg:       #FFF7E1;   /* lemon cream */
  --paper:    #FFFDF5;
  --ink:      #1A1530;   /* near-black plum */
  --ink-soft: #3A2E5C;

  --pink:     #FF3DA0;
  --pink-deep:#D8157E;

  --orange:   #FF7A1A;
  --orange-deep:#D85A00;

  --yellow:   #FFD23F;
  --yellow-deep:#E5B400;

  --lime:     #A8E10C;
  --lime-deep:#7AB400;

  --teal:     #00C2A8;
  --teal-deep:#009982;

  --cobalt:   #2547FF;
  --cobalt-deep:#1431D8;

  --grape:    #8C3CFF;

  --shadow-card: 8px 8px 0 var(--ink);
}

* { box-sizing: border-box; }

/* Striped placeholders (bright stripes) */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(
      45deg,
      var(--pink) 0,
      var(--pink) 14px,
      var(--yellow) 14px,
      var(--yellow) 28px
    );
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.placeholder--lime   { background: repeating-linear-gradient(45deg, var(--lime) 0, var(--lime) 14px, var(--yellow) 14px, var(--yellow) 28px); }
.placeholder--teal   { background: repeating-linear-gradient(45deg, var(--teal) 0, var(--teal) 14px, var(--cobalt) 14px, var(--cobalt) 28px); color: white; }
.placeholder--orange { background: repeating-linear-gradient(45deg, var(--orange) 0, var(--orange) 14px, var(--pink) 14px, var(--pink) 28px); }
.placeholder--cobalt { background: repeating-linear-gradient(45deg, var(--cobalt) 0, var(--cobalt) 14px, var(--grape) 14px, var(--grape) 28px); }
.placeholder--yellow { background: repeating-linear-gradient(45deg, var(--yellow) 0, var(--yellow) 14px, var(--orange) 14px, var(--orange) 28px); }
.placeholder--pink   { background: repeating-linear-gradient(45deg, var(--pink) 0, var(--pink) 14px, var(--orange) 14px, var(--orange) 28px); }

.placeholder .ph-label {
  position: relative; z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper);
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  white-space: nowrap;
}

.f-display { font-family: "Bagel Fat One", "Pacifico", cursive; font-weight: 400; letter-spacing: 0.005em; }
.f-script  { font-family: "Pacifico", cursive; }
.f-serif   { font-family: "DM Serif Display", Georgia, serif; }
.f-body    { font-family: "Inter", system-ui, sans-serif; }
.f-mono    { font-family: "JetBrains Mono", monospace; }
.f-hand    { font-family: "Caveat", cursive; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 999px;
}
.pill--pink   { background: var(--pink);   color: white; }
.pill--lime   { background: var(--lime);   color: var(--ink); }
.pill--cobalt { background: var(--cobalt); color: white; }
.pill--yellow { background: var(--yellow); color: var(--ink); }
.pill--orange { background: var(--orange); color: white; }

.cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--pink);
  color: white;
  border: 3px solid var(--ink);
  font-family: "Bagel Fat One", cursive;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}
.cta:hover { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 var(--ink); }

.cta--lime   { background: var(--lime);   color: var(--ink); }
.cta--cobalt { background: var(--cobalt); color: white; }
.cta--yellow { background: var(--yellow); color: var(--ink); }

/* Marquee */
.marquee {
  overflow: hidden;
  position: relative;
  display: flex;
  width: 100%;
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  animation: marquee-scroll 38s linear infinite;
  gap: 48px;
  padding-right: 48px;
}
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Starburst sticker */
.sticker {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--pink);
  color: white;
  font-family: "Bagel Fat One", cursive;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.6;
  clip-path: polygon(
    50% 0%, 60% 8%, 70% 3%, 76% 14%, 87% 12%, 88% 24%,
    99% 28%, 93% 38%, 100% 50%, 93% 62%, 99% 72%, 88% 76%,
    87% 88%, 76% 86%, 70% 97%, 60% 92%, 50% 100%, 40% 92%,
    30% 97%, 24% 86%, 13% 88%, 12% 76%, 1% 72%, 7% 62%,
    0% 50%, 7% 38%, 1% 28%, 12% 24%, 13% 12%, 24% 14%,
    30% 3%, 40% 8%
  );
}