@import "./fonts.css";

:root {
  --fol-fg: #000;
  --fol-bg: #fff;
  --fol-fg-muted: #666;
  --fol-muted: #f5f5f5;
  --fol-accent: #c2ff00;
  --fol-error: #ff3b3b;

  --fol-border-primary: 2px solid #000;
  --fol-border-secondary: 1px solid #ddd;
  --fol-radius: 0;

  --fol-font-sans: "IBM Plex Sans", system-ui, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --fol-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fol-fs-h1: 40px;  --fol-lh-h1: 1.05; --fol-ls-h1: -0.035em;
  --fol-fs-h2: 28px;  --fol-lh-h2: 1.1;  --fol-ls-h2: -0.030em;
  --fol-fs-h3: 20px;  --fol-lh-h3: 1.2;  --fol-ls-h3: -0.020em;
  --fol-fs-body: 16px; --fol-lh-body: 1.5;
  --fol-fs-small: 13px; --fol-lh-small: 1.45;
  --fol-fs-label: 12px; --fol-ls-label: 0.08em;

  --fol-space-1: 4px;
  --fol-space-2: 8px;
  --fol-space-3: 12px;
  --fol-space-4: 16px;
  --fol-space-6: 24px;
  --fol-space-8: 32px;
  --fol-space-12: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fol-fg: #fff;
    --fol-bg: #0a0a0a;
    --fol-fg-muted: #999;
    --fol-muted: #1a1a1a;
    --fol-border-primary: 2px solid #fff;
    --fol-border-secondary: 1px solid #333;
    /* --fol-accent and --fol-error stay identical */
  }
}

html, body {
  font-family: var(--fol-font-sans);
  color: var(--fol-fg);
  background: var(--fol-bg);
  font-size: var(--fol-fs-body);
  line-height: var(--fol-lh-body);
}
code, pre, kbd, samp {
  font-family: var(--fol-font-mono);
}