/* REALM — design tokens. Deep space: near-black blue surfaces, cream as the primary, electric blue as the accent. */
:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --surface-lowest: #0b0d10;
  --surface-low: #0e1115;
  --surface: #12161b;
  --surface-high: #171c22;
  --surface-highest: #1d232a;
  --on-surface: #ede6d6;
  --on-surface-variant: #b6b0a3;
  --outline: #7c776c;
  --outline-variant: #262a30;

  --primary: #ede6d6;
  --on-primary: #0b0d10;
  --primary-container: #171c22;
  --on-primary-container: #ede6d6;
  --secondary-container: #171c22;
  --on-secondary-container: #ede6d6;

  --accent: #ede6d6;
  --on-accent: #0b0d10;
  --accent-container: #1d232a;
  --on-accent-container: #ede6d6;
  --blue: #3f7bff;
  --blue-soft: #7fa8ff;

  --error: #ff6b6b;
  --error-container: #3a1414;
  --success: #a8e6c2;
  --success-container: #14261d;

  --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;
  --pixel: "Pixelify Sans", "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1240px;
  --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);
}