@layer reset, base, components, utilities;

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

  /* Text */
  --font-sans: "Adwaita Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --text-smallest: 0.625rem;
  --line-height-smallest: 1;
  --text-smaller: 0.75rem;
  --line-height-smaller: 1.4;
  --text-small: 0.875rem;
  --line-height-small: calc(1.25 / 0.875);
  --text-normal: 1rem;
  --line-height-normal: 1.5;
  --text-large: 2rem;
  --line-height-large: 1;

  /* Focus ring */
  --focus-ring-color: var(--color-link);
  --focus-ring-size: 2px;
  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);

  /* OKLCH colors: Fixed */
  --lch-black: 0 0 0;
  --lch-white: 1 0 0;

  /* OKLCH colors: */
  --lch-ink-darkest: 0.14 0 0;
  --lch-yellow-light: 0.9688 0.0066 106.52;
  --lch-orange-base: 0.7045 0.1926 39.23;
  --lch-concrete-base: 0.8716 0.0068 106.54;
  --lch-graphite-base: 0.5103 0 0;
  --lch-steel-base: 0.6268 0 0;
  --lch-off-white-base: 0.9401 0 0;

  /* Colors: Named */
  --color-white: oklch(var(--lch-white));
  --color-black: oklch(var(--lch-black));
  --color-ink: oklch(var(--lch-ink-darkest));
  --color-canvas: oklch(var(--lch-yellow-light));
  --color-paper-grid: oklch(var(--lch-black) / 0.06);
  --color-accent: oklch(var(--lch-orange-base));
  --color-link: oklch(var(--lch-ink-darkest));
  --color-concrete: oklch(var(--lch-concrete-base));
  --color-graphite: oklch(var(--lch-graphite-base));
  --color-steel: oklch(var(--lch-steel-base));
  --color-off-white: oklch(var(--lch-off-white-base));

  /* Z-index */
  --z-paper-grid: -1;
  --z-menu: 40;
  --z-flash: 50;
}