/* 🐸 Splish-Splash — a bright green & blue kids' theme 🐳 */

:root {
  /* Core palette */
  --color-bg:               #f2fcff;  /* soft sky-tinted white */
  --color-bg-secondary:     #d6f3e4;  /* pale mint */
  --color-text:             #0d3b45;  /* deep teal ink (high contrast) */
  --color-text-secondary:   #3f8b7d;  /* muted seaweed */

  --color-link:             #0aa1dd;  /* splashy blue */
  --color-secondary:        #2bc275;  /* grass green */
  --color-table:            #14b8a6;  /* teal table headers */

  /* Tints used for accents / striped rows */
  --color-accent:           #2bc27518;  /* faint green wash */
  --color-secondary-accent: #0aa1dd14;  /* faint blue wash */
  --color-shadow:           #cdeef7;
  --color-scrollbar:        #7fd6c4;

  /* Playful shapes & motion */
  --border-radius:          14px;       /* chunky rounded corners */
  --box-shadow:             3px 4px 0;  /* fun "sticker" offset shadow */
  --hover-brightness:       1.12;
  --line-height:            1.75;

  /* Rounded, friendly system fonts (kept system-safe for the edge runtime) */
  --font-family:
    "Comic Sans MS", "Chalkboard SE", "Baloo 2", "Trebuchet MS",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Cheerful sky-to-sea gradient behind everything */
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, #cdf3ff 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, #d4ffe9 0%, transparent 55%),
    linear-gradient(170deg, #f2fcff 0%, #e7fbf2 100%);
  background-attachment: fixed;
}

/* Bouncy, bubbly headings in alternating green/blue */
h1, h2, h3 {
  color: var(--color-link);
  letter-spacing: 0.3px;
}
h2 { color: var(--color-secondary); }

/* Buttons feel like big friendly bubbles */
button,
input[type="submit"],
.btn {
  border-radius: 999px;
  border-width: 3px;
  box-shadow: var(--box-shadow) var(--color-shadow);
  transition: transform 0.08s ease, filter 0.15s ease;
}
button:hover,
input[type="submit"]:hover,
.btn:hover { transform: translateY(-2px) rotate(-0.5deg); }
button:active,
input[type="submit"]:active,
.btn:active { transform: translateY(1px); }

/* Cards, forms & asides get the same rounded, sticker-shadow treatment */
form,
section aside,
.ticket-card {
  border-width: 2px;
  border-color: var(--color-secondary);
  box-shadow: var(--box-shadow) var(--color-shadow);
}

/* Zebra-striped tables in alternating mint, with a teal header */
table thead { color: #fff; }
table tr:nth-child(even) { background-color: var(--color-accent); }

/* Links get a wavy, playful underline on hover */
a:hover, a:focus { text-decoration-style: wavy; }