/**
 * Knock theme tokens
 * Change values here to restyle the whole app. No gradients — solid colors only.
 */
:root {
    /* Typography — professional UI font */
    --font-display: "IBM Plex Sans", "Segoe UI", sans-serif;
    --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;

    /* Single brand color + neutrals */
    --brand: #1b4f72;
    --brand-hover: #163f5b;
    --brand-soft: #e8f0f6;
    --ink: #1a1a1a;
    --ink-soft: #333333;
    --muted: #6b7280;
    --paper: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --line: #e5e7eb;
    --line-strong: #d1d5db;
    --on-brand: #ffffff;

    --danger: #b42318;
    --danger-soft: #fef3f2;
    --ok: #067647;
    --ok-soft: #ecfdf3;
    --warn: #b54708;
    --warn-soft: #fffaeb;

    /* Shape */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --focus-ring: 0 0 0 3px var(--brand-soft);

    /* Layout */
    --sidebar-w: 16.5rem;
    --topbar-h: 3.5rem;
    --page-max: 100%;
    --offcanvas-w: min(100vw, 70vw);
    --offcanvas-w-md: min(100vw, 32rem);
    --offcanvas-w-sm: min(100vw, 28rem);
    --control-h: 2.75rem;
    --table-page-size: 25;

    /* Motion */
    --ease: ease;
    --dur: 200ms;

    color-scheme: light;
}

html[data-theme="dark"] {
    --ink: #f3f4f6;
    --ink-soft: #d1d5db;
    --muted: #9ca3af;
    --paper: #0f1115;
    --surface: #171a21;
    --surface-2: #1e222b;
    --line: #2a2f3a;
    --line-strong: #3a4150;
    --brand-soft: color-mix(in srgb, var(--brand) 24%, #171a21);
    --danger-soft: color-mix(in srgb, var(--danger) 18%, #171a21);
    --ok-soft: color-mix(in srgb, var(--ok) 16%, #171a21);
    --warn-soft: color-mix(in srgb, var(--warn) 16%, #171a21);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
    color-scheme: dark;
}