/*
 * Hallmark · genre: modern-minimal · theme: Cobalt
 * Professional network admin UI — Fortinet/PAN-OS/UniFi school
 * Light paper, navy accent, Inter throughout, card-based, dense tables.
 */

:root {
    /* paper — light surface stack */
    --color-paper:   oklch(97% 0.002 240);
    --color-paper-2: oklch(100% 0 0);
    --color-paper-3: oklch(94% 0.003 240);
    --color-sidebar: oklch(100% 0 0);

    /* ink — text hierarchy */
    --color-ink:     oklch(25% 0.02 260);
    --color-ink-2:   oklch(50% 0.02 260);
    --color-ink-3:   oklch(65% 0.01 260);

    /* accent — Fortinet navy */
    --color-accent:  oklch(42% 0.15 260);
    --color-accent-light: oklch(92% 0.04 260);
    --color-focus:   oklch(55% 0.18 255);

    /* structural */
    --color-border:  oklch(90% 0.005 260);
    --color-border-strong: oklch(80% 0.01 260);
    --color-shadow:  oklch(20% 0.02 260 / 0.08);
    --color-shadow-hover: oklch(20% 0.02 260 / 0.12);

    /* status — traffic-light semantics, brand-neutral */
    --color-ok:      oklch(55% 0.15 145);
    --color-ok-bg:   oklch(95% 0.03 145);
    --color-warn:    oklch(55% 0.14 65);
    --color-warn-bg: oklch(95% 0.04 65);
    --color-err:     oklch(55% 0.20 25);
    --color-err-bg:  oklch(95% 0.03 25);
    --color-info:    oklch(55% 0.15 240);
    --color-info-bg: oklch(95% 0.03 240);

    /* type — Inter throughout */
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

    /* spacing — 4pt scale */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

    /* type scale */
    --text-xs:   11px; --text-sm: 13px; --text-base: 14px;
    --text-md:   16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px;

    /* shape + motion */
    --radius:    6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px var(--color-shadow);
    --shadow-md: 0 2px 8px var(--color-shadow);
    --shadow-hover: 0 4px 12px var(--color-shadow-hover);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --dur-fast:  120ms;
    --dur-med:   200ms;
}