/* Storytellit palette — Visual Guidelines p.08. Named colors are canonical; do not rename. */
:root{
  --ocean:#50829B;
  --sunshine:#FFDC8C;
  --midnight:#14233C;
  --powder:#EBEBF5;
  --tourmaline:#FF5F8C;

  /* tints & shades, derived for UI states only (not brand colors) */
  --midnight-900:#0C1727;
  --midnight-800:#14233C;
  --midnight-700:#1E3253;
  --midnight-600:#2A436B;
  --midnight-400:#5A6B87;
  --midnight-200:#A8B2C2;
  --powder-100:#F7F7FB;
  --powder-200:#EBEBF5;
  --powder-300:#DADAE8;
  --powder-400:#C3C3D6;
  --ocean-700:#3C6579;
  --ocean-600:#50829B;
  --ocean-300:#9CBACB;
  --ocean-100:#DCE7ED;
  --tourmaline-700:#E24570;
  --tourmaline-600:#FF5F8C;
  --tourmaline-300:#FFAFC5;
  --tourmaline-100:#FFE6ED;
  --sunshine-700:#D9AE55;
  --sunshine-300:#FFE9B4;
  --sunshine-100:#FFF6E1;
  --white:#FFFFFF;
  --black:#000000;

  /* logotype gradient — sunshine → tourmaline, as in the full-color mark and bubble icon */
  --gradient-brand:linear-gradient(135deg,#FFC98A 0%,#FF9C8C 45%,#FF5F8C 100%); /* @kind other */
  --gradient-brand-soft:linear-gradient(135deg,#FFDC8C 0%,#FF5F8C 100%); /* @kind other */

  /* semantic aliases — light theme (default) */
  --surface-page:var(--white);
  --surface-subtle:var(--powder-200);
  --surface-card:var(--white);
  --surface-inverse:var(--midnight);
  --surface-accent:var(--tourmaline);
  --surface-quiet:var(--powder-100);

  --text-heading:var(--midnight);
  --text-body:var(--midnight-700);
  --text-muted:var(--midnight-400);
  --text-on-dark:var(--powder-200);
  --text-on-dark-heading:var(--white);
  --text-accent:var(--tourmaline);
  --text-accent-on-dark:var(--sunshine);
  --text-link:var(--ocean-700);
  --text-link-hover:var(--tourmaline);

  --border-subtle:var(--powder-300);
  --border-strong:var(--midnight-200);
  --border-on-dark:rgba(235,235,245,.18);

  --focus-ring:var(--ocean);
}
/* dark theme scope — midnight backgrounds */
.st-dark{
  --surface-page:var(--midnight);
  --surface-subtle:var(--midnight-700);
  --surface-card:var(--midnight-700);
  --surface-quiet:var(--midnight-900);
  --text-heading:var(--white);
  --text-body:var(--powder-200);
  --text-muted:var(--midnight-200);
  --text-accent:var(--sunshine);
  --text-link:var(--sunshine);
  --text-link-hover:var(--tourmaline-300);
  --border-subtle:rgba(235,235,245,.18);
  --border-strong:rgba(235,235,245,.34);
}