/**
 * Fluid Zero - tokens
 * @layer tokens
 *
 * KNOBS share the base's names (set them on :root in @layer themes).
 * ROLES share the base's names too, through light-dark(): the OS decides,
 * <html data-theme="light|dark"> overrides.
 *
 * The plain values first are the floor for browsers without relative colour
 * (Safari before 18); the @supports block derives the same roles from
 * --accent and --neutral-tint, as the base does.
 */

@layer tokens {
  :root {
    color-scheme: light dark;

    /* KNOBS */
    --accent: oklch(42% 0.15 22);
    --neutral-tint: oklch(50% 0.01 75);
    --font-heading: system-ui, sans-serif;
    --font-body: system-ui, sans-serif;
    --font-mono: ui-monospace, monospace;
    --font-serif: ui-serif, Georgia, serif;   /* for a site that wants it */
    --measure: 66ch;
    --space-gutter: clamp(2rem, 1rem + 5vi, 5rem);   /* both sides together, as in core: 16 → 40px a side */
    --radius-control: 0.25rem;
    --border-width: 1px;

    /* ROLES: the floor */
    --on-accent: #fff;
    --accent-ink: light-dark(var(--accent), color-mix(in oklch, var(--accent) 40%, #fff));
    --color-text: light-dark(oklch(17% 0.01 75), oklch(93% 0.01 75));
    --color-text-muted: light-dark(oklch(44% 0.01 75), oklch(74% 0.01 75));
    --color-background: light-dark(oklch(99% 0.0075 75), oklch(14.5% 0.01 75));
    --color-surface: light-dark(oklch(95.5% 0.01 75), oklch(19% 0.01 75));
    --color-border: light-dark(oklch(86% 0.01 75), oklch(30% 0.01 75));
    --color-border-strong: var(--color-text);
    --color-error: light-dark(oklch(48% 0.17 25), oklch(76% 0.13 25));
    --color-focus: var(--accent-ink);
  }

  @supports (color: oklch(from red l c h)) {
    :root {
      --on-accent: oklch(from var(--accent) clamp(0, (0.575 - l) * 1000, 1) 0 0);
      --accent-ink: light-dark(oklch(from var(--accent) min(l, 0.45) c h), oklch(from var(--accent) max(l, 0.76) c h));
      --color-text: light-dark(oklch(from var(--neutral-tint) 0.17 c h), oklch(from var(--neutral-tint) 0.93 c h));
      --color-text-muted: light-dark(oklch(from var(--neutral-tint) 0.44 c h), oklch(from var(--neutral-tint) 0.74 c h));
      --color-background: light-dark(oklch(from var(--neutral-tint) 0.99 calc(c * 0.75) h), oklch(from var(--neutral-tint) 0.145 c h));
      --color-surface: light-dark(oklch(from var(--neutral-tint) 0.955 c h), oklch(from var(--neutral-tint) 0.19 c h));
      --color-border: light-dark(oklch(from var(--neutral-tint) 0.86 c h), oklch(from var(--neutral-tint) 0.30 c h));
    }
  }

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

  @media (prefers-contrast: more) {
    :root {
      --color-text-muted: var(--color-text);
      --color-border: var(--color-border-strong);
    }
  }
}