@layer tokens {
  :root {
    /* colour system */
    --pine-ink: #052c49;
    --pine-ink-deep: #032239;
    --pine-night: #021b2d;
    --pine-acid: #c9ff2f;
    --pine-acid-soft: #d8ff57;
    --pine-paper: #f7f8f4;
    --pine-white: #ffffff;
    --pine-text: #082c45;
    --pine-muted: #60717f;
    --pine-line: #d6dee2;

    /* typography */
    --needle-font-heading: "Maven Pro", "Segoe UI", system-ui, sans-serif;
    --needle-font-body: "Maven Pro", "Segoe UI", system-ui, sans-serif;
    --needle-size-h1: clamp(2.4rem, 1.4rem + 4.4vw, 4rem);
    --needle-size-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
    --needle-size-h3: clamp(1.15rem, 1rem + 0.6vw, 1.55rem);
    --needle-size-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
    --needle-size-small: 0.875rem;

    /* spacing scale */
    --needle-space-3xs: 0.25rem;
    --needle-space-2xs: 0.5rem;
    --needle-space-xs: 0.75rem;
    --needle-space-sm: 1rem;
    --needle-space-md: 1.5rem;
    --needle-space-lg: 2.25rem;
    --needle-space-xl: 3.5rem;
    --needle-space-2xl: 5.5rem;
    --needle-space-3xl: 8rem;

    /* layout */
    --needle-max-width: 1360px;
    --needle-gutter: clamp(1rem, 0.6rem + 2.2vw, 3rem);

    /* radii */
    --needle-radius-sm: 10px;
    --needle-radius-md: 18px;
    --needle-radius-lg: 28px;
    --needle-radius-pill: 999px;

    /* motion */
    --needle-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --needle-duration-fast: 150ms;
    --needle-duration-normal: 260ms;
  }
}