/* ENTITY — design tokens. Material 3 colour roles seeded from the brand violet, with the brand yellow as the accent. */
:root {
  color-scheme: light;

  --bg: #fdf8ff;
  --surface-lowest: #ffffff;
  --surface-low: #f8f2fb;
  --surface: #f2ecf6;
  --surface-high: #ece6f0;
  --surface-highest: #e6e0ea;
  --on-surface: #1d1b20;
  --on-surface-variant: #4a454f;
  --outline: #7b757f;
  --outline-variant: #ccc4d0;

  --primary: #6b3fe0;
  --on-primary: #ffffff;
  --primary-container: #e9ddff;
  --on-primary-container: #22005d;
  --secondary-container: #e8def8;
  --on-secondary-container: #1d192b;

  --accent: #ffe600;
  --on-accent: #1f1c00;
  --accent-container: #fff3a0;
  --on-accent-container: #3b3300;

  --error: #ba1a1a;
  --error-container: #ffdad6;
  --success: #1b6e3c;
  --success-container: #c8f1d6;

  --scrim: rgba(20, 16, 28, 0.42);
  --e1: 0 1px 2px rgba(29, 27, 32, 0.14), 0 1px 3px 1px rgba(29, 27, 32, 0.08);
  --e2: 0 1px 2px rgba(29, 27, 32, 0.14), 0 2px 6px 2px rgba(29, 27, 32, 0.1);
  --e3: 0 4px 8px 3px rgba(29, 27, 32, 0.1), 0 1px 3px rgba(29, 27, 32, 0.14);
  --e4: 0 10px 28px rgba(29, 27, 32, 0.18);

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --wrap: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --bar: 72px;
  --emph: cubic-bezier(0.2, 0, 0, 1);
  --emph-d: cubic-bezier(0.3, 0, 0.8, 0.15);
  --emph-a: cubic-bezier(0.05, 0.7, 0.1, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #141218;
  --surface-lowest: #0f0d13;
  --surface-low: #1c1b20;
  --surface: #211f26;
  --surface-high: #2b292f;
  --surface-highest: #36343a;
  --on-surface: #e6e1e9;
  --on-surface-variant: #cac4d0;
  --outline: #948f99;
  --outline-variant: #49454f;

  --primary: #cfbcff;
  --on-primary: #381e72;
  --primary-container: #4f378b;
  --on-primary-container: #e9ddff;
  --secondary-container: #4a4458;
  --on-secondary-container: #e8def8;

  --accent-container: #4d4500;
  --on-accent-container: #fff3a0;

  --error: #ffb4ab;
  --error-container: #93000a;
  --success: #7cd99a;
  --success-container: #0f3d22;

  --scrim: rgba(0, 0, 0, 0.6);
  --e1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --e2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
  --e3: 0 4px 8px 3px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
  --e4: 0 10px 28px rgba(0, 0, 0, 0.55);
}