/* Design tokens — the entire theming API.
 * Override any of these in your own (unlayered) CSS to retheme Marx.
 * Colors declare a static light value first, then a `light-dark()` value;
 * browsers without `light-dark()` keep the light fallback. */

:where(:root) {
  /* Automatic dark mode. Force one scheme in your own CSS with
   * `:root { color-scheme: light }` (or `dark`). */
  color-scheme: light dark;

  /* Rhythm */
  --marx-leading: 1.5;
  --marx-flow: 1.25rem;
  --marx-measure: 42rem;

  /* Shape */
  --marx-radius: 0.5rem;

  /* Spacing */
  --marx-space-2xs: 0.25rem;
  --marx-space-xs: 0.5rem;
  --marx-space-sm: 0.75rem;
  --marx-space-md: 1rem;
  --marx-space-lg: 1.25rem;
  --marx-space-xl: 2.5rem;

  /* Type scale */
  --marx-text-sm: 0.875rem;
  --marx-text-base: 1rem;
  --marx-text-h1: 2.5rem;
  --marx-text-h2: 2rem;
  --marx-text-h3: 1.6rem;
  --marx-text-h4: 1.35rem;
  --marx-text-h5: 1.15rem;
  --marx-text-h6: 1rem;

  /* Font stacks (platform fonts, per Tailwind Preflight 4.3.3 — explicit
   * names so CJK text respects the page's `lang` on Windows) */
  --marx-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --marx-font-serif: Georgia, Times, "Times New Roman", serif;
  --marx-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --marx-font-body: var(--marx-font-sans);

  /* Surfaces & text */
  --marx-bg: oklch(100% 0 0);
  --marx-bg: light-dark(oklch(100% 0 0), oklch(18% 0.01 260));
  --marx-text: oklch(0% 0 0 / 80%);
  --marx-text: light-dark(oklch(0% 0 0 / 80%), oklch(100% 0 0 / 87%));
  --marx-muted: oklch(0% 0 0 / 54%);
  --marx-muted: light-dark(oklch(0% 0 0 / 54%), oklch(100% 0 0 / 60%));
  --marx-disabled: oklch(0% 0 0 / 38%);
  --marx-disabled: light-dark(oklch(0% 0 0 / 38%), oklch(100% 0 0 / 42%));
  --marx-border: oklch(0% 0 0 / 12%);
  --marx-border: light-dark(oklch(0% 0 0 / 12%), oklch(100% 0 0 / 16%));
  --marx-surface: oklch(97.5% 0.002 280);
  --marx-surface: light-dark(oklch(97.5% 0.002 280), oklch(24% 0.01 260));

  /* Brand (buttons keep a fixed blue with white text in both schemes) */
  --marx-primary: oklch(54.6% 0.245 262.9);
  --marx-primary-strong: oklch(48.8% 0.243 264.4);
  --marx-on-primary: oklch(100% 0 0);

  /* Links & focus */
  --marx-link: oklch(54.6% 0.245 262.9);
  --marx-link: light-dark(oklch(54.6% 0.245 262.9), oklch(70.7% 0.165 254.6));
  --marx-link-hover: oklch(48.8% 0.243 264.4);
  --marx-link-hover: light-dark(
    oklch(48.8% 0.243 264.4),
    oklch(80.9% 0.105 251.8)
  );
  --marx-ring: oklch(54.6% 0.245 262.9);
  --marx-ring: light-dark(oklch(54.6% 0.245 262.9), oklch(70.7% 0.165 254.6));

  /* Feedback */
  --marx-danger: oklch(57.7% 0.245 27.3);
  --marx-danger: light-dark(oklch(57.7% 0.245 27.3), oklch(70.4% 0.191 22.2));
  --marx-success: oklch(60% 0.16 150);
  --marx-success: light-dark(oklch(60% 0.16 150), oklch(72% 0.16 152));
  --marx-warning: oklch(70% 0.16 75);
  --marx-warning: light-dark(oklch(70% 0.16 75), oklch(80% 0.14 80));
  --marx-mark: color-mix(in oklab, oklch(86% 0.17 95) 40%, transparent);
}