:root {
  /* Brand colors */
  --sf-color-ink: #153236;
  --sf-color-coral: #f06449;
  --sf-color-mint: #cfe4de;
  --sf-color-paper: #f6f2e9;
  --sf-color-slate: #5e6f72;
  --sf-color-white: #ffffff;

  /* Typography */
  --sf-font-sans: "Manrope", "Segoe UI", Arial, sans-serif;
  --sf-font-weight-regular: 400;
  --sf-font-weight-medium: 500;
  --sf-font-weight-semibold: 600;
  --sf-font-weight-bold: 700;

  --sf-text-xs: 0.75rem;
  --sf-text-sm: 0.875rem;
  --sf-text-md: 1rem;
  --sf-text-lg: 1.25rem;
  --sf-text-xl: 1.75rem;
  --sf-text-2xl: 2.5rem;
  --sf-text-3xl: clamp(3rem, 6vw, 5.5rem);

  --sf-leading-tight: 1.08;
  --sf-leading-heading: 1.18;
  --sf-leading-body: 1.55;

  /* Spacing: 4 px base grid */
  --sf-space-1: 0.25rem;
  --sf-space-2: 0.5rem;
  --sf-space-3: 0.75rem;
  --sf-space-4: 1rem;
  --sf-space-6: 1.5rem;
  --sf-space-8: 2rem;
  --sf-space-12: 3rem;
  --sf-space-16: 4rem;
  --sf-space-24: 6rem;

  /* Shape */
  --sf-radius-sm: 0.5rem;
  --sf-radius-md: 1rem;
  --sf-radius-lg: 1.5rem;
  --sf-radius-pill: 999px;
  --sf-border: 1px solid color-mix(in srgb, var(--sf-color-ink) 16%, transparent);

  /* Motion */
  --sf-motion-fast: 140ms;
  --sf-motion-base: 220ms;
  --sf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}