/* Material 3-inspired semantic roles: vivid blue accents and distinct cool surfaces. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --primary: #2563eb; --on-primary: #ffffff;
  --error: #b3261e;
  --primary-container: #e8f0ff; --on-primary-container: #1e40af;
  --secondary-container: #e7eef9; --on-secondary-container: #334155;
  --tertiary-container: #dff2ff; --on-tertiary-container: #075985;
  --surface: #f4f7ff; --surface-container-low: #eff4ff;
  --surface-container: #ebf2ff; --surface-container-high: #e8f0ff;
  --surface-bright: #ffffff; --on-surface: #152238; --on-surface-variant: #475569;
  --outline: #667b99; --outline-variant: #cbd8ef;
  --shadow: 0 12px 40px #183d7014; --scrim: #08112080;
  --phone-shadow: 12px 24px 60px #163d7326;
  --phone-surface: #f8fbff; --phone-frame: #344d70;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #60a5fa; --on-primary: #081120;
  --error: #ffb4ab;
  --primary-container: #1e3a5f; --on-primary-container: #dbeafe;
  --secondary-container: #23324b; --on-secondary-container: #d5e3f7;
  --tertiary-container: #123a4c; --on-tertiary-container: #bae6fd;
  --surface: #0b1220; --surface-container-low: #101c2e;
  --surface-container: #1b2c45; --surface-container-high: #233852;
  --surface-bright: #16243a; --on-surface: #f1f5ff; --on-surface-variant: #b8c7de;
  --outline: #8ea4c4; --outline-variant: #304565;
  --shadow: 0 12px 40px #0000004d; --scrim: #030812b3;
  --phone-shadow: 12px 24px 60px #00000059;
  --phone-surface: #101c2e; --phone-frame: #466181;
}