/* ==========================================================================
   variables.css — THE FILE TO EDIT FOR A NEW COLOR THEME OR FONT PAIRING
   ==========================================================================
   Every color and font in style.css and check.css refers back to one of
   these variables. To restyle the whole card for a new customer, change
   values here — you never need to hunt through style.css itself.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Allura&family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Great+Vibes&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  /* ---------------------------------------------------------------------
     COLORS
     --------------------------------------------------------------------- */

  /* Page & card background (light lavender-white in the original design) */
  --color-bg: #B1D3B9;

  /* Main body text */
  --color-text: #111111;

  /* Secondary/muted text (dates under aturcara, guestbook message text) */
  --color-text-muted: #888888;
  --color-text-muted-light: lightgray;

  /* Primary accent — couple names, section icons, links, highlights */
  --color-accent: darkcyan;

  /* Dark gradient used behind the footer menu, bottom sheets, and the
     falling petal animation. Change all three stops to swap the whole
     card's "dark mode" accent color. */
  --gradient-dark: linear-gradient(to right, #24243e, #302b63, #0f0c29);

  /* Soft light gradient behind the intro & event-info sections */
  --gradient-light: linear-gradient(to right, #E6F2DD, #f9fcff, #E6F2DD);

  /* Pure white surfaces (the opening tap-to-enter circle button) */
  --color-surface: #88BDA4;

  /* Name text color on the opening tap-to-enter button */
  --color-intro-name: #ffffff;

  /* The digits inside each countdown box (distinct from the countdown
     labels above, which use --color-countdown-number) */
  --color-countdown-digit: #ffffff;

  /* Text/icon color for anything sitting on the dark gradient surfaces
     (bottom-sheet menu titles, footer icons, contact names) */
  --color-on-dark: #F8F4FF;

  /* RSVP feedback colors */
  --color-rsvp-yes: green;
  --color-rsvp-no: red;
  --color-success-icon: green;

  /* Countdown timer */
  --color-countdown-number: #efebe0;
  --color-countdown-label: #9c9c9c;
  --color-countdown-box-bg: #1a1c1ccc;

  /* Misc accents carried over from the original design */
  --color-scrollbar-track: #ADD8E6;
  --color-scrollbar-thumb: navy;
  --color-music-text: wheat;
  --color-border-subtle: #DDDDDD;
  --color-border: grey;

  /* ---------------------------------------------------------------------
     FONTS
     --------------------------------------------------------------------- */

  /* Body copy */
  --font-body: "Roboto", sans-serif;

  /* Big script names on the intro screen ("John & Sarah") */
  --font-script: "Allura", cursive;

  /* Names on the opening tap-to-enter button */
  --font-script-alt: "Great Vibes", cursive;

  /* Bold couple names under the event info */
  --font-couple-name: "Playfair Display", serif;

  /* Guestbook, bottom-sheet menus (calendar/location/music/contact/RSVP) */
  --font-elegant: "Cormorant Garamond", serif;

  /* Countdown numbers + the "Buka" open button label */
  --font-display: "Bebas Neue", Arial, sans-serif;
}