@layer tokens {
  :root {
    color-scheme: light;

    --primitive-plum-900: #2d1842;
    --primitive-plum-700: #58356d;
    --primitive-ivory-50: #fbf8f1;
    --primitive-white: #ffffff;
    --primitive-coral-500: #ff7048;
    --primitive-coral-700: #d84622;
    --primitive-peach-100: #ffe2d4;
    --primitive-lilac-400: #a58cff;
    --primitive-lilac-100: #e8e1ff;
    --primitive-mint-300: #88e8c5;
    --primitive-mint-700: #176c59;
    --primitive-lime-300: #daf65a;
    --primitive-yellow-100: #fff1ad;

    --color-bg-page: var(--primitive-ivory-50);
    --color-bg-surface: var(--primitive-white);
    --color-text-primary: var(--primitive-plum-900);
    --color-text-muted: rgb(45 24 66 / 70%);
    --color-text-soft: rgb(45 24 66 / 52%);
    --color-action-primary: var(--primitive-coral-700);
    --color-action-hover: var(--primitive-plum-900);
    --color-accent-coral: var(--primitive-coral-500);
    --color-accent-lilac: var(--primitive-lilac-400);
    --color-accent-mint: var(--primitive-mint-300);
    --color-accent-lime: var(--primitive-lime-300);
    --color-border-subtle: rgb(45 24 66 / 15%);
    --color-focus-ring: var(--primitive-lime-300);

    --font-sans: Inter, "Avenir Next", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 560;
    --font-weight-semibold: 680;

    --text-display: clamp(3.75rem, 6.5vw, 7.2rem);
    --text-section: clamp(3rem, 5.8vw, 6.25rem);
    --text-heading: clamp(1.75rem, 2.8vw, 3rem);
    --text-body-lg: clamp(1.08rem, 1.35vw, 1.3rem);
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-label: 0.76rem;

    --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: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    --space-section: clamp(6.5rem, 10vw, 10rem);
    --container-gutter: clamp(1.25rem, 4vw, 4.75rem);
    --container-max: 100rem;
    --nav-height: 5.25rem;

    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.75rem;
    --radius-xl: 2.5rem;
    --radius-round: 999px;

    --shadow-float: 0 1.5rem 4rem rgb(45 24 66 / 14%);
    --shadow-card: 0 0.75rem 2.2rem rgb(45 24 66 / 10%);
    --shadow-focus: 0 0 0 4px var(--color-focus-ring);

    --motion-fast: 140ms;
    --motion-base: 240ms;
    --motion-enter: 760ms;
    --motion-long: 1100ms;
    --motion-stagger: 80ms;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);

    --z-header: 30;
    --z-skip: 100;
  }
}