:root {
    /* ----- color: surfaces ----- */
    --color-canvas: #f3efe8;
    --color-surface: #ffffff;
    --color-surface-alt: #faf7f1;
    --color-surface-sunken: #ece7dd;

    /* ----- color: ink ----- */
    --color-ink: #14171f;
    --color-ink-muted: #6a7184;
    --color-ink-faint: #a8acb8;
    --color-ink-on-dark: #f5f3ef;
    --color-ink-on-red: #ffffff;

    /* ----- color: lines (one border family for the whole app) ----- */
    --color-border: #e3dccf;
    --color-border-strong: #cfc6b3;
    --color-border-dark: #2b2d36;

    /* ----- color: accents ----- */
    --color-charcoal: #1a1c23;
    --color-charcoal-soft: #2a2c34;
    --color-charcoal-line: #353841;

    --color-red: #e63946;
    --color-red-deep: #c8232f;
    --color-red-bright: #ef5560;
    --color-red-soft: #fde6e8;
    --color-red-line: #f0bcc0;

    --color-amber: #e3a008;
    --color-amber-soft: #fbeed1;
    --color-emerald: #1d9b62;
    --color-emerald-soft: #d8f3e3;
    --color-indigo: #4f6dff;
    --color-indigo-soft: #e3e7ff;

    /* ----- focus rings (only "shadow" we keep, for a11y) ----- */
    --focus-red: 0 0 0 3px rgba(230, 57, 70, .22);
    --focus-ink: 0 0 0 3px rgba(20, 23, 31, .14);

    /* ----- radius (single small scale; nothing rounded-pillowy) ----- */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    /* ----- type ----- */
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter", -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-xs: 0.72rem;
    --text-sm: 0.85rem;
    --text-md: 0.95rem;
    --text-lg: 1.1rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.7rem;
    --text-3xl: 2.4rem;

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.55;

    /* ----- spacing (consistent 8px-ish scale) ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;

    /* ----- layout constants ----- */
    --sidebar-w: 220px;
    --page-pad-x: var(--space-6);
    --page-pad-y: var(--space-6);
    --control-h: 38px;             /* shared height: buttons, pills, inputs */

    /* ----- motion ----- */
    --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}