/* Relay: shared light-mode colors, typography, spacing, and controls. */
:root {
  --type-h1: 36px;
  --contrast: #2c2a24;
  --hairline: color-mix(in srgb, var(--contrast) 10%, transparent);
  --hairline-strong: color-mix(in srgb, var(--contrast) 20%, transparent);
  --fill-quiet: color-mix(in srgb, var(--contrast) 5%, transparent);
  --fill-hover: color-mix(in srgb, var(--contrast) 10%, transparent);
  --elev-1: 0 1px 2px color-mix(in srgb,#3d3223 7%,transparent),0 2px 10px color-mix(in srgb,#3d3223 7%,transparent);
  --elev-2: 0 2px 4px color-mix(in srgb,#3d3223 8%,transparent),0 10px 28px color-mix(in srgb,#3d3223 11%,transparent);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --font-display: Fraunces, Georgia, serif;
  --font-body: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --h-header: 64px;
  --z-header: 100;
  --z-overlay: 120;
  --lesson-indicator-top: 0px;
  --lesson-indicator-height: 0px;
  --elev-popover: 0 8px 24px color-mix(in srgb,var(--contrast) 12%,transparent),0 2px 6px color-mix(in srgb,var(--contrast) 8%,transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--forest) 20%, transparent);
  --ink: #eadfc8;
  --paper: #eadfc8;
  --text: #2c2a24;
  --muted: #6b6252;
  --faint: #7d7462;
  --panel: #f6eeda;
  --panel-2: #d8c8a8;
  --brass: #a67728;
  --brass-bright: #8b641f;
  --rust: #bd4b2a;
  --forest: #204635;
  --forest-deep: #16332a;
  --line: var(--hairline);
  --line-strong: var(--hairline-strong);
  --sans: var(--font-body);
  --serif: var(--font-display);
  --mono: var(--font-mono);
  --dur-hover: 120ms;
}