@layer reset, base, components, modules, utilities, native, platform;

:root {
  --text-xx-small: 0.55rem;
  --text-x-small: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.1rem;
  --text-large: 1.5rem;
  --text-x-large: 1.8rem;
  --text-xx-large: 2.5rem;

  --font-sans:
    "Adwaita Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Fizzy", "Segoe UI", "Noto Sans", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, monospace;

  --lch-ink-darkest: 26% 0.05 264;
  --lch-ink-darker: 40% 0.026 262;
  --lch-ink-dark: 56% 0.014 260;
  --lch-ink-medium: 66% 0.008 258;
  --lch-ink-light: 84% 0.005 256;
  --lch-ink-lighter: 92% 0.003 254;
  --lch-ink-lightest: 96% 0.002 252;

  --lch-blue-darkest: 26% 0.126 264;
  --lch-blue-darker: 40% 0.166 262;
  --lch-blue-dark: 57.02% 0.1895 260.46;
  --lch-blue-medium: 66% 0.196 257.82;
  --lch-blue-light: 84.04% 0.0719 255.29;
  --lch-blue-lighter: 92% 0.026 254;
  --lch-blue-lightest: 96% 0.016 252;

  --lch-orange-darker: 45% 0.14 55;
  --lch-orange-lighter: 94% 0.03 70;

  --lch-red-darker: 45% 0.14 25;
  --lch-red-lighter: 94% 0.03 25;

  --lch-brown-darker: 42% 0.09 45;
  --lch-brown-medium: 52% 0.08 45;
  --lch-brown-lighter: 90% 0.03 50;

  --lch-yellow-darkest: 16% 0.035 90;
  --lch-yellow-darker: 55% 0.14 95;
  --lch-yellow-medium: 78% 0.14 95;
  --lch-yellow-lighter: 94% 0.05 95;
  --lch-yellow-lightest: 97% 0.02 95;

  --lch-pink-lighter: 90% 0.14 350;
  --lch-pink-light: 82% 0.18 342;
  --lch-pink-medium: 68% 0.18 348;
  --lch-purple-ink: 22% 0.08 325;

  --color-ink: oklch(var(--lch-ink-darkest));
  --color-ink-darkest: oklch(var(--lch-ink-darkest));
  --color-ink-darker: oklch(var(--lch-ink-darker));
  --color-ink-dark: oklch(var(--lch-ink-dark));
  --color-ink-medium: oklch(var(--lch-ink-medium));
  --color-ink-light: oklch(var(--lch-ink-light));
  --color-ink-lighter: oklch(var(--lch-ink-lighter));
  --color-ink-lightest: oklch(var(--lch-ink-lightest));

  --color-canvas: #fff;
  --color-border: oklch(var(--lch-ink-light));
  --color-link: oklch(var(--lch-blue-darker));

  --nav-height: 3.25rem;
  --jump-board-gap: 0.5rem;
}