/* OnsBoek design tokens — translated from the "OnsBoek Prototype" Claude Design project. */
:root {
    --ob-font: 'Public Sans', system-ui, sans-serif;

    --ob-primary: #0e6e5c;
    --ob-primary-dark: #0a5648;
    --ob-primary-soft: #e3f1ee;
    --ob-primary-muted: #8fb5ac;

    --ob-bg: #f4f6f5;
    --ob-surface: #ffffff;
    --ob-dark: #142825;

    --ob-text: #1c2b2a;
    --ob-text-soft: #3c4644;
    --ob-text-muted: #5b6b68;
    --ob-text-faint: #7a8a87;
    --ob-text-ghost: #9aa8a5;

    --ob-border: #e2e8e6;
    --ob-border-soft: #eef2f1;
    --ob-border-input: #d4dedb;
    --ob-checkbox-border: #b6c4c1;

    --ob-hover: #f7faf9;
    --ob-hover-strong: #f0f3f2;
    --ob-weekend: #f7f9f4;

    /* Rights matrix — its own stepped ramp rather than the hover pair. A hover only has to register
       under the cursor, so --ob-hover lands at 1.05:1 on white; a zebra stripe read across 60 columns,
       and a 20px legend chip read on its own, both need real separation. Ratios are against
       --ob-surface, then against --ob-matrix-zebra, since every fill has to hold on both row types. */
    --ob-matrix-zebra: #edf2f0;         /* 1.13:1 */
    --ob-matrix-band: #e7edeb;          /* 1.19:1 on the white column heads it caps */
    --ob-matrix-allowed: #c9e6dd;       /* 1.33:1 / 1.17:1 */
    /* Allowed and read-only cannot be told apart by lightness: both have to sit below the stripe and
       above the point where their own glyph drops under 4.5:1, and that window is only ~1.05:1 wide.
       So the pair is separated by chroma instead — saturated mint against a near-neutral grey — with
       the • / R glyphs carrying it for anyone who cannot see the hue at all. */
    --ob-matrix-readonly: #e1e5e3;      /* 1.28:1 / 1.13:1 */
    --ob-matrix-hatch: #cfdad7;         /* the "not set" hatch line: 1.43:1, visible at 3px */
    --ob-matrix-edge: #8d9895;          /* legend chip outline: 3.0:1, the WCAG 1.4.11 floor */
    --ob-matrix-override: #fbe9e7;
    --ob-matrix-override-edge: #e8c4bf;
    --ob-matrix-override-text: #b3362a;

    --ob-avatar-bg: #d9e6e3;
    --ob-focus-ring: #b7d9d1;

    --ob-radius: 10px;
    --ob-radius-lg: 14px;
}

html, body {
    font-family: var(--ob-font);
    background: var(--ob-bg);
    color: var(--ob-text);
}

a, .btn-link {
    color: var(--ob-primary);
}

a:hover {
    color: var(--ob-primary-dark);
}