/* ============================================================================
   Theme tokens as CSS custom properties. Tailwind (js/tailwind-config.js) resolves
   every colour/spacing/font token through these variables, so switching the value
   set below re-themes the entire site at runtime — no rebuild.

   Colours are stored as space-separated RGB channels ("R G B") so Tailwind's
   `rgb(var(--c-x) / <alpha-value>)` opacity modifiers work (e.g. bg-primary/10).

   :root            -> default "green" (Curated Green) theme.
   [data-theme=pink] -> "Same Same But in Pink". Only the tokens that change are
                        listed; everything else inherits the green values.
   ============================================================================ */
:root {
  /* typography + spacing (shared across themes today, but swappable per theme) */
  --ff-sans: "Lexend", sans-serif;
  --sp-base: 4px;
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 48px;
  --sp-xl: 80px;
  --sp-gutter: 24px;
  --sp-margin-mobile: 16px;
  --sp-container-max: 1280px;

  /* colours — Curated Green */
  --c-primary: 0 84 64;
  --c-on-primary: 255 255 255;
  --c-primary-container: 15 110 86;
  --c-on-primary-container: 154 237 207;
  --c-inverse-primary: 132 214 185;
  --c-primary-fixed: 160 243 212;
  --c-primary-fixed-dim: 132 214 185;
  --c-on-primary-fixed: 0 33 23;
  --c-on-primary-fixed-variant: 0 81 62;
  --c-surface-tint: 8 107 83;

  --c-secondary: 94 94 92;
  --c-on-secondary: 255 255 255;
  --c-secondary-container: 225 223 220;
  --c-on-secondary-container: 99 99 96;
  --c-secondary-fixed: 228 226 222;
  --c-secondary-fixed-dim: 200 198 195;
  --c-on-secondary-fixed: 27 28 26;
  --c-on-secondary-fixed-variant: 71 71 68;

  --c-tertiary: 137 38 0;
  --c-on-tertiary: 255 255 255;
  --c-tertiary-container: 172 59 18;
  --c-on-tertiary-container: 255 211 198;
  --c-tertiary-fixed: 255 219 208;
  --c-tertiary-fixed-dim: 255 181 158;
  --c-on-tertiary-fixed: 58 11 0;
  --c-on-tertiary-fixed-variant: 133 36 0;

  --c-error: 186 26 26;
  --c-on-error: 255 255 255;
  --c-error-container: 255 218 214;
  --c-on-error-container: 147 0 10;

  --c-background: 251 249 248;
  --c-on-background: 27 28 28;
  --c-surface: 251 249 248;
  --c-surface-dim: 220 217 217;
  --c-surface-bright: 251 249 248;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 246 243 242;
  --c-surface-container: 240 237 237;
  --c-surface-container-high: 234 232 231;
  --c-surface-container-highest: 228 226 225;
  --c-surface-variant: 228 226 225;
  --c-on-surface: 27 28 28;
  --c-on-surface-variant: 63 73 68;
  --c-inverse-surface: 48 48 48;
  --c-inverse-on-surface: 243 240 240;
  --c-outline: 111 122 116;
  --c-outline-variant: 190 201 195;
}

/* Explicit green selector so setting data-theme="green" is a no-op override. */
:root[data-theme="green"] {
}

/* Same Same But in Pink — hot magenta + purple accents on warm cream, bold black UI.
   Only the tokens that differ from green are overridden here. */
:root[data-theme="pink"] {
  --c-primary: 214 0 110;
  --c-on-primary: 255 255 255;
  --c-primary-container: 251 217 232;
  --c-on-primary-container: 138 0 70;
  --c-inverse-primary: 255 143 196;
  --c-primary-fixed: 255 217 232;
  --c-primary-fixed-dim: 255 143 196;
  --c-on-primary-fixed: 62 0 32;
  --c-on-primary-fixed-variant: 168 0 88;
  --c-surface-tint: 214 0 110;

  /* bold black secondary surfaces (nav, dark buttons) */
  --c-secondary: 26 26 26;
  --c-on-secondary: 255 255 255;
  --c-on-secondary-container: 68 68 68;

  --c-tertiary: 123 44 191;
  --c-on-tertiary: 255 255 255;
  --c-tertiary-container: 237 227 251;
  --c-on-tertiary-container: 59 0 104;
  --c-tertiary-fixed: 237 227 251;
  --c-tertiary-fixed-dim: 201 166 240;
  --c-on-tertiary-fixed: 42 0 73;
  --c-on-tertiary-fixed-variant: 94 27 150;

  /* warm cream surfaces, near-black text, softer warm borders */
  --c-background: 250 246 240;
  --c-surface: 250 246 240;
  --c-surface-bright: 250 246 240;
  --c-surface-dim: 232 226 218;
  --c-surface-container-low: 246 241 235;
  --c-surface-container: 241 235 228;
  --c-surface-container-high: 235 228 220;
  --c-surface-container-highest: 229 222 213;
  --c-surface-variant: 232 224 216;
  --c-on-surface: 26 26 26;
  --c-on-surface-variant: 74 64 56;
  --c-on-background: 26 26 26;
  --c-outline: 168 158 146;
  --c-outline-variant: 229 224 218;
  --c-inverse-surface: 26 26 26;
  --c-inverse-on-surface: 251 243 247;
}

/* ---------------------------------------------------------------------------- */

body {
  font-family: var(--ff-sans);
  background-color: rgb(var(--c-background));
  -webkit-font-smoothing: antialiased;
}
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined.filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar,
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.deal-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.deal-card:hover {
  box-shadow: 0px 10px 30px rgba(4, 52, 44, 0.05);
}

/* Discount badges. The themes are deliberately distinct:
   - Green: the original small terracotta pills, and NO hero badge.
   - Pink : readable magenta pills + the bold, italic, offset-shadow "sticker" hero
            badge from the Same Same But in Pink design.
   The hero badge is rendered in the markup on every theme but only *shown* in pink. */
.discount-badge {
  background-color: rgb(var(--c-tertiary-container));
  color: #fff;
  font-weight: 600;
}
.discount-badge-hero {
  display: none;
}
:root[data-theme="pink"] .discount-badge {
  background-color: rgb(var(--c-primary));
  color: rgb(var(--c-on-primary));
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
:root[data-theme="pink"] .discount-badge-hero {
  display: inline-block;
  background-color: rgb(var(--c-primary));
  color: rgb(var(--c-on-primary));
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  box-shadow: 5px 5px 0 rgba(20, 3, 12, 0.6);
}
.toggle-checkbox:checked + .toggle-label {
  background-color: rgb(var(--c-primary));
}
.toggle-checkbox:checked + .toggle-label .toggle-dot {
  transform: translateX(100%);
}
.ticket-cutout {
  position: relative;
}
.ticket-cutout::before,
.ticket-cutout::after {
  content: "";
  position: absolute;
  left: -8px;
  width: 16px;
  height: 16px;
  background-color: rgb(var(--c-background));
  border-radius: 50%;
  z-index: 10;
}
.ticket-cutout::before {
  top: -8px;
}
.ticket-cutout::after {
  bottom: -8px;
}
.ticket-cutout-right::before,
.ticket-cutout-right::after {
  content: "";
  position: absolute;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: rgb(var(--c-background));
  border-radius: 50%;
  z-index: 10;
}
.ticket-cutout-right::before {
  top: -8px;
}
.ticket-cutout-right::after {
  bottom: -8px;
}
.expansion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.expanded .expansion-content {
  max-height: 600px;
}
.expanded .chevron-icon {
  transform: rotate(180deg);
}
.payment-card-active {
  border-color: rgb(var(--c-primary-container));
  background-color: rgb(var(--c-primary) / 0.06);
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastIn {
  from {
    transform: translate(-50%, 16px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
.toast {
  animation: toastIn 0.3s ease-out;
}
.nav-active {
  background-color: rgb(var(--c-primary-container));
  color: rgb(var(--c-on-primary-container));
}