/* Self-hosted IBM Plex (latin subset, Fontsource build, OFL-1.1).
   src url()s are relative so they resolve against this stylesheet's own
   location — works whether it's served at /tokens.css (lustre dev) or
   /assets/frontend/tokens.css (gleam server). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --color-ink: #191713;
  --color-ink-soft: #5f5a51;
  --color-muted: #81786c;
  --color-line: #ded2c0;
  --color-line-strong: #c9b9a3;
  --color-canvas: #f7f1e8;
  --color-canvas-warm: #efe5d8;
  --color-surface: #fffaf2;
  --color-surface-raised: #fffdf8;
  --color-selected: #f0eadf;
  --color-accent: #9a6f43;
  --color-good: #2f6b45;
  --color-warn: #9a6325;
  --color-bad: #a64f3d;
  --color-info: #426c73;
  /* Chart color for absolute counts (not a money verdict, not a status tone)
     — a muted regal blue sitting at the same perceived weight as
     --color-good/--color-bad against the warm parchment surfaces. Replaces
     --color-accent as a chart color (accent still owns UI chrome). */
  --color-figure: #34558b;

  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-md: 0.94rem;
  --text-lg: 1.12rem;
  --text-xl: 1.45rem;
  --text-2xl: 1.85rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;

  --shadow-soft: 0 1px 2px rgba(25, 23, 19, 0.04), 0 8px 22px rgba(61, 50, 38, 0.07);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
  --shadow-drawer: -18px 0 42px rgba(25, 23, 19, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #f6ede1;
    --color-ink-soft: #cdbfae;
    --color-muted: #a99a8b;
    --color-line: #3a312a;
    --color-line-strong: #554236;
    --color-canvas: #1f1a16;
    --color-canvas-warm: #171310;
    --color-surface: #26201c;
    --color-surface-raised: #2d2621;
    --color-selected: #3a312a;
    --color-accent: #d4a66a;
    --color-good: #8ac095;
    --color-warn: #e0b46f;
    --color-bad: #e97f60;
    --color-info: #8fb9c0;
    --color-figure: #7e9bce;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28), 0 10px 28px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 24%, transparent);
    --shadow-drawer: -18px 0 42px rgba(0, 0, 0, 0.5);
  }
}