/* Design tokens and subtle Liquid Glass. Brand: purple and pink primary (EVOLVE Advice guidelines). */
:root {
  color-scheme: light dark;
  --purple: #581B6C;
  --pink: #D93686;
  --blue: #273377;
  --green: #19783F;
  --orange: #E46E2A;

  --bg: #f8f5fa;
  --surface: #ffffff;
  --surface-2: #f4eff7;
  --text: #2b2733;
  --muted: #5b5566;
  --line: rgba(88, 27, 108, 0.14);
  --btn: #581B6C;
  --btn-text: #ffffff;
  --focus: #D93686;
  --danger: #a82d1a;
  --ok: #19783F;

  --glass-bg: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-hl: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 8px 28px rgba(60, 20, 80, 0.12);
  --glass-blur: 18px;
  --glass-sat: 160%;
  --solid-surface: #ffffff;

  --radius: 20px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 340ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #130f1a;
    --surface: #1d1828;
    --surface-2: #261f33;
    --text: #f2eef7;
    --muted: #b9b0c6;
    --line: rgba(255, 255, 255, 0.12);
    --btn: #6d2486;
    --focus: #f06aa8;
    --danger: #ff8b78;
    --ok: #6fd596;
    --glass-bg: rgba(34, 28, 48, 0.55);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-hl: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    --solid-surface: #231d31;
  }
}

/* Solid first, glass when the browser supports it. */
.glass {
  background: var(--solid-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-hl), var(--glass-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--solid-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}