@layer base {
  :root {
    --color-primary: oklch(0.3583 0.0641 258.28);
    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.2) c h);

    --color-teal: oklch(0.6032 0.0962 238.21);
    --color-teal-light: oklch(from var(--color-teal) calc(l + 0.36) c calc(h + 25));

    --color-purple: oklch(0.641 0.1338 297.34);
    --color-purple-light: oklch(from var(--color-purple) calc(l + 0.34) c calc(h - 10));

    --color-neutral: oklch(0.3412 0 0);
    --color-neutral-50: oklch(from var(--color-neutral) calc(l + 0.64) c h);
    --color-neutral-100: oklch(from var(--color-neutral) calc(l + 0.62) c h);
    --color-neutral-200: oklch(from var(--color-neutral) calc(l + 0.6) c h);
    --color-neutral-400: oklch(from var(--color-neutral) calc(l + 0.45) c h);
    --color-neutral-600: oklch(from var(--color-neutral) calc(l + 0.35) c h);

    --color-white: oklch(100% 0 0);

    --font-body: Aptifer Sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --font-size-sm: clamp(0.85rem, 0.7206rem + 0.0382vw, 0.9202rem);
    --font-size-base: clamp(0.875rem, 0.8239rem + 0.2273vw, 1rem);
    --font-size-lg: clamp(1.05rem, 0.9682rem + 0.3636vw, 1.25rem);
    --font-size-xl: clamp(1.26rem, 1.0485rem + 0.9398vw, 1.7769rem);
    --font-size-2xl: clamp(1.512rem, 1.1616rem + 1.5574vw, 2.3686rem);

    --drawer-width: 450px;
    --drawer-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    --drawer-border-width: 10px;
    --header-height: 64px;
    --transition-speed: 0.15s;
  }
}