:root{
  --brand:#38bdf8;
  --brand-50:#e7f7ff;
  --brand-100:#cff0ff;
  --brand-200:#b6e9ff;
  --brand-300:#93dcff;
  --brand-600:#0ea5e9;
  --brand-700:#0284c7;
  --brand-ink:#075a89;
  --brand-border:color-mix(in srgb, #38bdf8 28%, transparent);
  --card-bg:var(--brand-50);
  --card-gradient:linear-gradient(180deg,var(--brand-100),var(--brand-50));
  --shadow-color:color-mix(in srgb, var(--brand) 18%, transparent);
  --card-shadow:0 6px 18px var(--shadow-color);
  --btn-bg:var(--brand-600);
  --btn-border:var(--brand-600);
  --btn-text:var(--on-brand);
}
@media (prefers-color-scheme: dark){ :root{ --brand-50:#cff0ff; --brand-100:#e7f7ff; } }