/* ── Design tokens ─────────────────────────────────────────────────────────── */
/*  To retheme the site, change the hex value next to any colour name below.
    Semantic roles (title, heading, accent…) are mapped in the second :root block.
*/

/* ── Full palette ──────────────────────────────────────────────────────────── */
:root {
  /* Yellows / Peach */
  --sunlit-apricot:    #FFE3B0;
  --golden-peach:      #FFCD8F;
  --daffodil-glow:     #FFD966;
  --soft-butterlight:  #FFF6C2;
  --golden-petal:      #FFDF91;
  --sunbeam-mist:      #F5F08F;

  /* Oranges / Melons */
  --mango-mellow:      #FFBA7C;
  --papaya-pop:        #FF9D6E;
  --cantaloupe-kiss:   #FFB5A1;
  --warm-clay-blush:   #E9B8AB;

  /* Pinks / Corals */
  --blooming-rose:     #FAB6DC;
  --coral-blush:       #FFA6C2;
  --petal-pink:        #FF94A5;
  --melon-punch:       #FF807A;

  /* Purples / Lavenders */
  --lilac-cloud:       #C7B1F3;
  --sweet-orchid:      #E2B3F2;
  --pastel-azure:      #A5C5FA;

  /* Blues / Teals */
  --sky-drizzle:       #B7F1FF;
  --morning-blue:      #84C7E5;
  --clear-lagoon:      #67ADE4;
  --tropical-ice:      #9DEBE9;
  --freshwater-blue:   #9FE4E9;
  --poolside-teal:     #83C2C7;

  /* Greens (light → dark) */
  --lemon-sprout:      #E6F27C;
  --lime-dew:          #D9E378;
  --spring-meadow:     #C2ED6E;
  --fresh-pistachio:   #A8E772;
  --zesty-olive:       #B8C853;
  --tender-leaf:       #9EDB8B;
  --mint-blossom:      #8FDFA2;
  --mint-cream:        #ACF2D7;
  --cool-aloe:         #7BE3C1;
}

/* ── Semantic tokens — change these to reassign colours to UI roles ─────────── */
:root {
  --color-title:    var(--clear-lagoon);     /* page title                  */
  --color-heading:  var(--fresh-pistachio); /* cards / section headings    */
  --color-accent:   var(--fresh-pistachio); /* primary accent              */

  /* Surfaces */
  --bg:        #f7fdf4;
  --card-bg:   rgba(246, 255, 242, 0.95);

  /* Typography */
  --text:      #243d18;
  --muted:     #5e7c4a;

  /* Component */
  --border:    rgba(168, 231, 114, 0.30);
  --shadow:    0 8px 32px rgba(90, 160, 50, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius:    1.5rem;
  --btn-grad:  linear-gradient(135deg, var(--fresh-pistachio), var(--morning-blue));

  /* Legacy aliases kept for any existing var() references */
  --green:           var(--fresh-pistachio);
  --green-mid:       var(--mint-blossom);
  --green-lt:        var(--spring-meadow);
  --green-lemon:     var(--lemon-sprout);
  --green-olive:     var(--zesty-olive);
  --sky:             var(--morning-blue);
  --sky-deep:        var(--clear-lagoon);
  --sky-lt:          var(--sky-drizzle);
  --yellow:          var(--daffodil-glow);
  --peach:           var(--sunlit-apricot);
  --pink-accent:     var(--blooming-rose);
  --lavender-accent: var(--lilac-cloud);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base body ─────────────────────────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.card {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding: 2.2rem 2.5rem;
  width: 100%;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.8rem;
  border-radius: 3rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled             { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--daffodil-glow);
  color: #3a2e00;
  box-shadow: 0 4px 14px rgba(255, 217, 102, 0.45);
}
.btn-primary:hover:not(:disabled) { background: var(--golden-peach); box-shadow: 0 6px 20px rgba(255, 217, 102, 0.60); }

.btn-danger {
  background: linear-gradient(135deg, var(--mango-mellow), var(--melon-punch));
  color: #3a1a0a;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover:not(:disabled) { background: rgba(168, 231, 114, 0.18); }

.btn-sm   { padding: 0.4rem 1rem; font-size: 0.85rem; }
.btn-full { width: 100%; }

/* ── Spinners ──────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner-dark {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border: 2.5px solid rgba(90, 160, 50, 0.18);
  border-top-color: var(--color-heading);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Alpine cloak ──────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }