/* CORE — design tokens. Material 3 colour roles seeded from the brand violet, with the brand yellow as the accent. */
:root {
  color-scheme: dark;
  --bg: #050505;
  --surface-lowest: #050505;
  --surface-low: #0b0b0a;
  --surface: #0f0f0d;
  --surface-high: #151513;
  --surface-highest: #1c1b19;
  --on-surface: #ece9df;
  --on-surface-variant: #bdb9ac;
  --outline: #7b786f;
  --outline-variant: #2a2926;

  --primary: #ece9df;
  --on-primary: #050505;
  --primary-container: #1c1b19;
  --on-primary-container: #ece9df;
  --secondary-container: #1c1b19;
  --on-secondary-container: #ece9df;

  --accent: #ffb45a;
  --on-accent: #050505;
  --accent-container: #2a1c0e;
  --on-accent-container: #ffd9a8;

  --error: #ff6b6b;
  --error-container: #3a1414;
  --success: #c9f5a3;
  --success-container: #16260f;

  --scrim: rgba(0, 0, 0, 0.66);
  --e1: none; --e2: none; --e3: none;
  --e4: 0 10px 28px rgba(0, 0, 0, 0.6);

  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 40px);
  --bar: 60px;
  --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);
}