/* dlthisvid — design tokens.
 * Dark is the default because the use scene is a phone at night, not an office.
 * One accent, used only for the primary action and focus. No glow, no gradient. */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-var.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Sizes are measurements, so they are set in a mono face with tabular figures. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: clamp(2rem, 1.5rem + 2.2vw, 3rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shell: 46rem;
  --tap: 44px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root,
:root[data-theme='dark'] {
  --bg: #101114;
  --surface: #191c22;
  --surface-raised: #1f232a;
  --border: #2b2f37;
  --border-strong: #3a3f49;
  --text: #e9ebef;
  --text-muted: #a0a6b0;
  --accent: #3d63dd;
  --accent-hover: #4a70ea;
  --accent-text: #ffffff;
  --danger: #ff6b6b;
  --danger-surface: #2a1a1c;
  --focus: #7d9bff;
}

:root[data-theme='light'] {
  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-raised: #ffffff;
  --border: #e0e3e8;
  --border-strong: #c6cbd3;
  --text: #14161a;
  --text-muted: #5a616c;
  --accent: #2f52c8;
  --accent-hover: #26449f;
  --accent-text: #ffffff;
  --danger: #b3261e;
  --danger-surface: #fdf0ef;
  --focus: #2f52c8;
}