@layer tokens {
  :root {
    --color-brand: #0170B9;
    --color-brand-dark: #092651;
    --color-brand-hover: #005f9d;
    --color-accent-soft: #e8f4fb;
    --color-text: #1d2630;
    --color-text-muted: #4b4f58;
    --color-heading: #092651;
    --color-border: #e5e5e5;
    --color-surface: #ffffff;
    --color-surface-muted: #f5f5f5;
    --color-surface-dark: #092651;
    --color-black: #000000;
    --color-white: #ffffff;

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --step--1: clamp(0.84rem, 0.82rem + 0.08vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.55rem, 1.32rem + 0.95vw, 2.1rem);
    --step-3: clamp(2rem, 1.58rem + 1.7vw, 3rem);
    --step-4: clamp(2.55rem, 1.85rem + 2.8vw, 4.35rem);

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

    --radius-sm: 0.65rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;

    --shadow-sm: 0 8px 26px rgb(9 38 81 / 0.07);
    --shadow-md: 0 20px 60px rgb(9 38 81 / 0.12);
    --focus-ring: 0 0 0 3px rgb(1 112 185 / 0.28);
    --container: 74rem;
    --header-height: 5rem;
    --transition: 180ms ease;
  }
}