:root {
  --typography-scale: 1.333;
  --typography-font-family-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --typography-font-family-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --typography-font-family-mono: 'Iosevka', ui-monospace, Menlo, Consolas, monospace;
  --typography-line-height-body: 1.75;
  --typography-line-height-heading: 1.1;
  --typography-weight-body: 400;
  --typography-weight-bold: 600;
  --typography-weight-heading: 500;
  --spacing-unit: 8px;
  --spacing-scale-0: 4px;
  --spacing-scale-1: 8px;
  --spacing-scale-2: 12px;
  --spacing-scale-3: 16px;
  --spacing-scale-4: 24px;
  --spacing-scale-5: 32px;
  --spacing-scale-6: 48px;
  --spacing-scale-7: 64px;
  --spacing-scale-8: 96px;
  --spacing-scale-9: 128px;
  --color-primary: #1a73e8;
  --color-primary-fg: #faf6ef;
  --color-bg: #fff;
  --color-fg: #1f1814;
  --color-muted: #777;
  --color-accent: #a87349;
  --color-danger: #8b2e2e;
  --color-success: #3d6450;
  --color-surface-1: #fefcf7;
  --color-surface-2: #f3ecdf;
  --color-border: #dfd3c0;
  --color-text: #222;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 0 rgba(31,24,20,0.06);
  --shadow-md: 0 2px 0 rgba(31,24,20,0.08);
  --shadow-lg: 0 4px 0 rgba(31,24,20,0.10);
  --motion-duration-fast: 150ms;
  --motion-duration-base: 300ms;
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-emphasised: cubic-bezier(0.3, 0, 0, 1);
  --layout-max-width: 60rem;
  --layout-gutter: 2.5rem;
  --layout-breakpoint-sm: 40rem;
  --layout-breakpoint-md: 52rem;
  --layout-breakpoint-lg: 68rem;
  --font_stack: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --max_width: 70ch;
}

.operator {
  --color-bg: #f4f1ea;
  --color-fg: #1a1613;
  --color-muted: #6c5f4c;
  --color-tertiary: #8a7a66;
  --color-primary: #2f6f48;
  --color-primary-fg: #ffffff;
  --color-accent: #c2a23a;
  --color-accent-ink: #7a5f12;
  --color-success: #3a9d5d;
  --color-warning: #d99b27;
  --color-danger: #8a2b20;
  --color-surface-1: #fffdf8;
  --color-surface-2: #efe9dc;
  --color-surface-hover: #f1ebde;
  --color-border: #e3dccd;
  --color-panel-dark-bg: #1c1916;
  --color-panel-dark-fg: #d6cfc0;
  --color-note-bg: #f3efe2;
  --color-badge-good-bg: #d4ecd0;
  --color-badge-good-fg: #1f5b15;
  --color-badge-mid-bg: #fff3c4;
  --color-badge-mid-fg: #6b4f00;
  --color-badge-bad-bg: #f6cfcf;
  --color-badge-bad-fg: #6b1818;
  --color-rank-good: #1f7a1f;
  --color-rank-bad: #c0392b;
  --color-dot-off: #b9b1a0;
  --color-glow-green: rgba(58, 157, 93, 0.15);
  --color-glow-amber: rgba(217, 155, 39, 0.15);
  --color-glow-grey: rgba(185, 177, 160, 0.15);
  --color-glow-red: rgba(138, 43, 32, 0.15);
  --typography-font-family-heading: Inter, 'Segoe UI', system-ui, sans-serif;
  --typography-font-family-body: Inter, 'Segoe UI', system-ui, sans-serif;
  --typography-font-family-mono: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  --typography-weight-heading: 600;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

@media (prefers-color-scheme: dark) {
  .operator {
    --color-bg: #1c1916;
    --color-fg: #e8e2d6;
    --color-muted: #b3a890;
    --color-tertiary: #b3a890;
    --color-primary: #6fae84;
    --color-surface-1: #26221d;
    --color-surface-2: #3a342c;
    --color-surface-hover: #322c25;
    --color-border: #3a342c;
    --color-note-bg: #322c20;
  }
}