/* Design tokens — the single source of truth. Override these to re-skin everything. */
:root {
    color-scheme: light;
    --font: 'Inter', "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Ink / neutrals */
    --ink: #111827;
    --ink-body: #1f2937;
    --muted: #6b7280;
    --muted-soft: #9ca3af;
    --line: #e5e7eb;
    --line-light: #f3f4f6;
    --paper: #f8f9fa;
    --card: #ffffff;
    --black: #111827;
    --cream: #fdf8ef;

    /* Brand + accents */
    --teal: #0f766e;
    --teal-mid: #0d9488;
    --teal-dark: #115e59;
    --teal-bg: #f0fdfa;
    --teal-light: #ccfbf1;
    --orange: #c05621;
    --blue: #1d4ed8;
    --amber: #f1b334;
    --red: #b42318;

    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow: 0 4px 14px rgba(17, 24, 39, 0.07), 0 1px 4px rgba(17, 24, 39, 0.04);
    --shadow-md: 0 10px 28px rgba(17, 24, 39, 0.09);
    --shadow-lg: 0 20px 50px rgba(17, 24, 39, 0.12), 0 4px 16px rgba(17, 24, 39, 0.06);
    --shadow-xl: 0 32px 80px rgba(17, 24, 39, 0.16);

    /* Radii */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Motion */
    --t: 160ms ease;
    --t-md: 240ms ease;
}