/* === Global sticky footer rules (全域黏底) === */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { margin-top: auto; }

.hero{
  background: radial-gradient(1200px 400px at 50% -10%, rgba(13,148,136,0.15), transparent),
              linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.9));
}
:root{ --accent-secondary:#FF8EFF; }
.btn-secondary{ display:inline-block; padding:.5rem 1rem; border-radius:.5rem; border:1px solid var(--accent-secondary);
  background:linear-gradient(180deg, rgba(255,142,255,.12), rgba(255,142,255,.05)); }
.badge-secondary{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  color:#fff;
  padding:.15rem .6rem;
  border-radius:9999px;
  background:color-mix(in oklab, var(--color-secondary) 45%, black);
  border:1px solid color-mix(in oklab, var(--color-secondary) 55%, black);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
a.link-secondary:hover{ color: var(--accent-secondary); }


/* === Theming overrides === */
:root{
  --color-primary:#FF8EFF;
  --color-secondary:#4C6EF5;
}
/* Override commonly used Tailwind teal utilities to use our primary */
.bg-teal-700{ background-color: var(--color-primary) !important;}
.text-teal-700{ color: var(--color-primary) !important;}
.border-teal-700{ border-color: var(--color-primary) !important;}
.bg-teal-800{ background-color: color-mix(in oklab, var(--color-primary) 78%, black) !important;}
.bg-teal-900{ background-color: color-mix(in oklab, var(--color-primary) 88%, black) !important;}
/* Buttons and gradients using primary */
.hero{
  background: radial-gradient(1200px 400px at 50% -10%, color-mix(in oklab, var(--color-primary) 20%, transparent), transparent),
              linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.9));
}
.btn-secondary{
  display:inline-block; padding:.5rem 1rem; border-radius:.5rem;
  border:1px solid var(--color-secondary);
  background:linear-gradient(180deg, color-mix(in oklab, var(--color-secondary) 18%, white), color-mix(in oklab, var(--color-secondary) 8%, white));
}
.badge-secondary{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  color:#fff;
  padding:.15rem .6rem;
  border-radius:9999px;
  background:color-mix(in oklab, var(--color-secondary) 45%, black);
  border:1px solid color-mix(in oklab, var(--color-secondary) 55%, black);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
a.link-secondary:hover{ color: var(--color-secondary); }