/* LF tokens v1. Import once, use the variables; never hard-code these colours.
   Picked from four colours (background, text, accent, detail) in the palette lab; everything else is derived,
   so tweak there and paste the result here rather than editing single values.
   Light stays near-neutral: the accent only appears on the mark and small details. Dark mode shows the accent.
   Fonts load separately (lf-fonts.css) so apps can self-host them. */

:root {
  /* base */
  --lf-bg: #e6e4db;
  --lf-surface: #f1efea;
  --lf-line: #cecbc3;
  --lf-text: #473d38;
  --lf-muted: #6d655f;

  /* accent: green, lilac for small details */
  --lf-accent: #86b78e;
  --lf-accent-ink: #42754b;
  --lf-accent-soft: #d7e5d9;
  --lf-on-accent: #1b2d1e;
  --lf-detail: #a87bb7;

  /* primary action: ink in light mode, accent in dark */
  --lf-primary: #473d38;
  --lf-on-primary: #f1efea;

  /* status: same softness as the accent */
  --lf-ok: #467c61;
  --lf-warn: #9c7430;
  --lf-bad: #a24739;

  /* type */
  --lf-font-brand: 'Itim', 'Figtree', ui-rounded, system-ui, sans-serif;
  --lf-font-ui: 'Figtree', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --lf-font-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* shape */
  --lf-radius: 10px;
  --lf-radius-sm: 6px;
  --lf-control: 36px;
  --lf-hairline: 1px solid var(--lf-line);

  /* space */
  --lf-1: 4px;
  --lf-2: 8px;
  --lf-3: 12px;
  --lf-4: 16px;
  --lf-6: 24px;
  --lf-8: 32px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lf-bg: #1b1a16;
    --lf-surface: #252420;
    --lf-line: #363431;
    --lf-text: #e7e5e4;
    --lf-muted: #999896;
    --lf-accent: #a2c3a7;
    --lf-accent-ink: #c1d7c5;
    --lf-accent-soft: #2e3830;
    --lf-on-accent: #1c2b1f;
    --lf-detail: #d2c0d8;
    --lf-primary: #a2c3a7;
    --lf-on-primary: #1c2b1f;
    --lf-ok: #a4ccb8;
    --lf-warn: #ddc292;
    --lf-bad: #dda59d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --lf-bg: #1b1a16;
  --lf-surface: #252420;
  --lf-line: #363431;
  --lf-text: #e7e5e4;
  --lf-muted: #999896;
  --lf-accent: #a2c3a7;
  --lf-accent-ink: #c1d7c5;
  --lf-accent-soft: #2e3830;
  --lf-on-accent: #1c2b1f;
  --lf-detail: #d2c0d8;
  --lf-primary: #a2c3a7;
  --lf-on-primary: #1c2b1f;
  --lf-ok: #a4ccb8;
  --lf-warn: #ddc292;
  --lf-bad: #dda59d;
  color-scheme: dark;
}