/*
 * Theme-independent scales. Semantic tokens (colours, fonts, density) live in themes.css.
 *
 * Breakpoints (mobile first, custom properties cannot be used in media queries):
 *   40rem  tablet and up
 *   64rem  desktop and up
 */
@layer tokens {
  :root {
    --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;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
    --text-3xl: clamp(1.625rem, 1.4rem + 1.2vw, 2.125rem);
    --text-4xl: clamp(2rem, 1.6rem + 2vw, 3rem);

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.55;

    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 999px;

    --duration-fast: 120ms;
    --duration: 200ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --z-nav: 10;
    --z-toolbar: 20;

    --measure: 65ch;
    --container: 72rem;
    --container-narrow: 40rem;
  }
}