@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* ============================================================
   SPREELY BRAND STYLE GUIDE — design tokens
   Use these exact values. Support light and dark mode.
   Do not invent new colours.
   ============================================================ */
:root{
  --brand:#63b688; --brand-deep:#1c3a2b; --brand-muted:#4d6a5c; --brand-light:#8fd4ae;
  --page:#f6faf8; --surface:#ffffff; --sunken:#f0f2f5; --line:#ededed;
  --ink:#222222; --ink-2:#555555; --ink-3:#666666;
  --ok:#4caf50; --info:#2196f3; --warn:#ff9800; --danger:#a84849;
  --radius:3px; --shadow-card:0 1px 3px rgba(0,0,0,.08);
  --shadow-overlay:0 8px 28px rgba(0,0,0,.45);
  --font:'Poppins','Segoe UI',Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#252525; --surface:#2d2d2d; --sunken:#353535; --line:#3e3e3e;
    --ink:#ffffff; --ink-2:#d2d2d2; --ink-3:#9a9a9a; --brand-deep:#8fd4ae;
  }
}
:root[data-theme="dark"]{
  --page:#252525; --surface:#2d2d2d; --sunken:#353535; --line:#3e3e3e;
  --ink:#ffffff; --ink-2:#d2d2d2; --ink-3:#9a9a9a; --brand-deep:#8fd4ae;
}

/* ------------------------------------------------------------
   Foundation application (tokens + font only).
   Sets the brand typeface site-wide; visual colour rollout
   happens deliberately, element by element, later.
   ------------------------------------------------------------ */
body, button, input, select, textarea, .btn { font-family: var(--font); }