/* Kibble brand tokens, in OKLCH. Same values as apps/web/src/app/globals.css. */
:root {
  /* colour, brand values from apps/web/src/app/globals.css, in OKLCH */
  --color-paper:      oklch(96.4% 0.004 91);
  --color-paper-2:    oklch(94.3% 0.007 89);
  --color-paper-3:    oklch(98.6% 0.003 91);
  --color-rule:       oklch(91.0% 0.008 91);
  --color-rule-2:     oklch(82.6% 0.013 92);
  --color-muted:      oklch(51.8% 0.013 90);
  --color-ink:        oklch(21.7% 0.004 107);
  --color-ink-2:      oklch(29.2% 0.007 107);
  --color-accent:     oklch(64.4% 0.192 42);
  --color-accent-deep: oklch(56% 0.19 42);
  --color-accent-ink: oklch(96.4% 0.004 91);
  --color-focus:      oklch(64.4% 0.192 42);
  --color-code-paper: oklch(21.7% 0.004 107);
  --color-code-ink:   oklch(96.4% 0.004 91);
  --color-code-muted: oklch(70% 0.012 90);
  --color-code-accent: oklch(72.5% 0.182 46);

  /* type */
  --font-display: "Sora", "IBM Plex Sans", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, monospace;

  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-display-s: clamp(2rem, 3.2vw + 0.75rem, 2.9rem);
  --text-display:   clamp(2.5rem, 4.2vw + 0.75rem, 4.25rem);

  /* space, 4 pt */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --page-max: 72rem;

  /* shape + motion */
  --rule-hair: 1px;
  --radius-pill: 999px;
  --radius-card: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
}