@layer reset, base, layout, components, utilities;

/* Every colour below is a light-dark() pair, which resolves against the inherited color-scheme.
   Drop the color-scheme declarations and the whole palette silently resolves to its light half. */
:root {
  color-scheme: light dark;

  --color-ink: light-dark(oklch(22.93% 0.009 255.6), oklch(92.00% 0.006 264.4));
  --color-muted: light-dark(oklch(55.10% 0.023 264.4), oklch(65.00% 0.020 264.4));
  --color-rule: light-dark(oklch(92.76% 0.006 264.5), oklch(30.00% 0.010 264.4));
  --color-page: light-dark(oklch(100% 0 264.4), oklch(19.00% 0.014 264.4));
  --color-shade: light-dark(oklch(98.40% 0.003 264.4), oklch(23.50% 0.016 264.4));
  --color-accent: light-dark(oklch(47.50% 0.130 262.0), oklch(74.00% 0.120 255.0));
  --color-accent-strong: light-dark(oklch(39.00% 0.140 262.0), oklch(84.00% 0.100 255.0));
  --color-accent-wash: light-dark(oklch(95.20% 0.024 262.0), oklch(28.00% 0.045 258.0));

  --color-waiting-bg: light-dark(oklch(96.19% 0.058 95.6), oklch(32.00% 0.045 80.0));
  --color-waiting-ink: light-dark(oklch(47.32% 0.125 46.2), oklch(86.00% 0.110 85.0));
  --color-working-bg: light-dark(oklch(93.19% 0.032 255.6), oklch(30.00% 0.045 262.0));
  --color-working-ink: light-dark(oklch(42.44% 0.181 265.6), oklch(83.00% 0.095 255.0));
  --color-settled-bg: light-dark(oklch(96.24% 0.043 156.7), oklch(30.00% 0.040 156.0));
  --color-settled-ink: light-dark(oklch(44.79% 0.108 151.3), oklch(85.00% 0.110 155.0));
  --color-wrong-bg: light-dark(oklch(93.56% 0.031 17.7), oklch(31.00% 0.055 20.0));
  --color-wrong-ink: light-dark(oklch(44.37% 0.161 26.9), oklch(83.00% 0.105 22.0));
  --color-quiet-bg: light-dark(oklch(96.70% 0.003 264.5), oklch(28.00% 0.008 264.5));
  --color-quiet-ink: light-dark(oklch(44.61% 0.026 256.8), oklch(79.00% 0.015 264.5));
  --color-aside-bg: light-dark(oklch(94.33% 0.028 294.6), oklch(31.00% 0.050 294.0));
  --color-aside-ink: light-dark(oklch(43.20% 0.211 292.8), oklch(85.00% 0.090 293.0));

  --color-wrong-rule: light-dark(oklch(80.77% 0.103 19.6), oklch(45.00% 0.110 20.0));
  --color-wrong-wash: light-dark(oklch(97.05% 0.013 17.4), oklch(24.00% 0.030 20.0));
  --color-ours-wash: light-dark(oklch(97.32% 0.013 251.6), oklch(24.00% 0.028 255.0));
  --color-ours-rule: light-dark(oklch(88.23% 0.057 254.1), oklch(40.00% 0.070 255.0));

  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --block-space: 1rem;
  --block-space-quarter: calc(var(--block-space) / 4);
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);
  --card-padding: 0.75rem;

  --font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-x-small: 0.75rem;
  --text-small: 0.875rem;
  --text-large: 1.5rem;

  --radius: 6px;
  --radius-tight: 4px;
  --radius-round: 999px;

  --page-inline-size: 68rem;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}