/* ============================================================
   Design tokens — savetools (dev toolbench)
   Monochrome, square, engineered. One source of truth for the
   whole UI: colors, type, spacing, rules, motion.
   ============================================================ */

:root {
    /* Ink & paper — the entire palette */
    --ink: #0a0a0a;
    --paper: #ffffff;
    --surface: #f5f5f4;   /* raised panels, code blocks */
    --rule: #e3e3e0;      /* hairline borders */
    --rule-strong: #bdbdb9;
    --muted: #7a7a76;     /* secondary text */

    /* Type — IBM Plex superfamily */
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

    /* Type scale */
    --fs-display: 1.75rem;  /* 28 — view titles */
    --fs-lg: 1.25rem;       /* 20 — section heads, stamp */
    --fs-md: 1rem;          /* 16 — inputs */
    --fs-body: 0.875rem;    /* 14 — prose */
    --fs-data: 0.8125rem;   /* 13 — tables, values */
    --fs-label: 0.6875rem;  /* 11 — uppercase labels */

    --track-label: 0.09em;  /* letter-spacing for uppercase labels */

    /* Space (4px base) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

    /* Structure */
    --border: 1px solid var(--rule);
    --border-ink: 1px solid var(--ink);
    --sidebar-w: 232px;
    --content-max: 880px;

    /* Motion — short, functional, tied to state changes */
    --t-fast: 120ms ease;
    --t-med: 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}