/* Running Result — design tokens.
   One source for the site (styles.css) and the components in /ui. Load it
   before either. Custom properties inherit into shadow roots, so overriding
   one here (or on any ancestor of a component) re-themes the components too.

   A theme is three colors: --bg, --fg and --accent. Every other color is
   mixed from them, so a member's own three (set on <html> by /early.js)
   re-color the whole site. --on-accent, --shade and color-scheme can't be
   derived in CSS; early.js works them out and sets them alongside. */

:root {
  /* The theme */
  --bg: #0a0a0a;
  --fg: #f4f4f2;
  --accent: #e10600;
  --on-accent: #fff;
  /* Away from --fg: black on a dark theme, white on a light one. */
  --shade: #000;

  /* Surfaces */
  --ink: var(--bg);
  --ink-raise: color-mix(in oklab, var(--bg), var(--fg) 4%);
  --ink-sink: color-mix(in oklab, var(--bg), var(--shade) 40%);

  /* Type */
  --paper: var(--fg);
  --paper-dim: color-mix(in oklab, var(--fg) 66%, var(--bg));
  --paper-faint: color-mix(in oklab, var(--fg) 44%, var(--bg));

  /* Accent */
  --red: var(--accent);
  --red-lift: color-mix(in oklab, var(--accent), #fff 12%);
  --red-glow: color-mix(in srgb, var(--accent) 16%, transparent);

  /* Lines */
  --rule: color-mix(in srgb, var(--fg) 10%, transparent);
  --rule-soft: color-mix(in srgb, var(--fg) 5.5%, transparent);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}