/* Fonts sit outside any layer: @font-face is not a cascaded rule. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope-latin-wght-757d91ba.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Type, space, shape and motion. Colours live in colors.css, in the same layer. */
@layer tokens {
  :root {
    --font-sans: "Manrope", system-ui, sans-serif;
    --text-x-small: 0.75rem;
    --text-small: 0.875rem;
    --text-normal: 1rem;
    --text-medium: 1.125rem;
    --text-large: 1.375rem;
    --text-x-large: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
    --text-xx-large: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);

    --block-space: 1rem;
    --block-space-half: calc(var(--block-space) / 2);
    --block-space-double: calc(var(--block-space) * 2);
    --inline-space: 1ch;
    --inline-space-half: calc(var(--inline-space) / 2);
    --inline-space-double: calc(var(--inline-space) * 2);

    --radius: 0.625rem;
    --radius-large: 1rem;
    --radius-x-large: 1.25rem;
    --radius-pill: 99rem;

    --shadow: 0 0.25rem 0.75rem oklch(var(--lch-text) / 0.08);
    --shadow-large: 0 0.75rem 2rem oklch(var(--lch-text) / 0.16);

    --focus-ring: 2px solid var(--color-link);
    --focus-offset: 2px;
    --touch-target: 2.75rem;
    --transition: 200ms ease;

    /* Motion: 150–250 ms (design-system.md). The ease is AdHoc's flip (docs/design/references.md). */
    --ease-out-back: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-flip: 250ms;
    --duration-press: 150ms;

    /* The logo's ring: its stroke is 29% of its outer diameter (radii 31.6 and 13.2 of 63). */
    --ring-ratio: 0.29;
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --transition: 0ms; --duration-flip: 0ms; --duration-press: 0ms; }
  }
}