/*
 * Theme-owned webfonts. The theme owns the global header and footer on every
 * route, so it must also own the fonts that chrome renders in. Previously the
 * only @font-face lived in the React bundle, so routes that do not load the
 * bundle (/login, /signup, /symmetricstrength/learn) fell back to a system
 * font and the same header markup rendered visibly different.
 * Project-owned files; no third-party font request.
 */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Variable.woff2') format('woff2'),
    url('../fonts/DMSans-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff2') format('woff2'),
    url('../fonts/BebasNeue-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ss-primary: #e11d48;
  --ss-primary-hover: #be123c;
  --ss-primary-soft: #fff1f2;
  --ss-primary-border: #fda4af;
  --ss-ink: #020617;
  --ss-heading: #0f172a;
  --ss-body: #334155;
  --ss-muted: #64748b;
  --ss-faint: #94a3b8;
  --ss-page: #f8fafc;
  --ss-surface: #ffffff;
  --ss-surface-muted: #f1f5f9;
  --ss-border: #e2e8f0;
  --ss-border-strong: #cbd5e1;
  --ss-focus-ring: #fda4af;
  --ss-success: #15803d;
  --ss-danger: #b91c1c;
  --ss-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ss-font-display: 'Bebas Neue', Impact, sans-serif;
  --ss-content: 46.25rem;
  --ss-wide: 73.75rem;
  --ss-radius-control: 0.75rem;
  --ss-radius-card: 1rem;
  --ss-shadow-card: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 24px rgb(15 23 42 / 4%);
}