:root {
  --ofa-brand-version: "1.1.1";

  --ofa-color-ink: #17202a;
  --ofa-color-ink-muted: #475569;
  --ofa-color-ink-soft: #64748b;
  --ofa-color-canvas: #f5f7fa;
  --ofa-color-surface: #ffffff;
  --ofa-color-border: #dbe3ec;
  --ofa-color-border-soft: #e9eef4;
  --ofa-color-brand: #4f46e5;
  --ofa-color-brand-strong: #3730a3;
  --ofa-color-brand-soft: #eef2ff;
  --ofa-color-success: #147a4b;
  --ofa-color-success-soft: #ecfdf3;
  --ofa-color-warning: #c2413b;

  --ofa-font-body: "Geist", system-ui, sans-serif;
  --ofa-font-heading: "Space Grotesk", "Geist", system-ui, sans-serif;
  --ofa-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ofa-type-display: 4rem;
  --ofa-type-section: 2.25rem;
  --ofa-type-subsection: 1.375rem;
  --ofa-type-body: 1.0625rem;
  --ofa-type-small: 0.875rem;
  --ofa-type-display-mobile: 2.625rem;
  --ofa-type-section-mobile: 1.875rem;
  --ofa-type-subsection-mobile: 1.25rem;

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

  --ofa-radius-control: 0.375rem;
  --ofa-radius-card: 0.5rem;
  --ofa-radius-pill: 999px;
  --ofa-measure: 68ch;
  --ofa-measure-tight: 62ch;
  --ofa-container: 72rem;
  --ofa-shadow-soft: 0 16px 40px rgb(23 32 42 / 0.08);
  --ofa-shadow-lift: 0 20px 48px rgb(23 32 42 / 0.12);
  --ofa-motion-fast: 150ms;
  --ofa-motion-standard: 200ms;
  --ofa-motion-deliberate: 250ms;
}

@media (max-width: 640px) {
  :root {
    --ofa-type-display: var(--ofa-type-display-mobile);
    --ofa-type-section: var(--ofa-type-section-mobile);
    --ofa-type-subsection: var(--ofa-type-subsection-mobile);
    --ofa-type-body: 1rem;
  }
}