/* Shared design values of the wiki (--wk-*). Loaded after behnke-ui.css, which owns brand colours and
   the size scale (--behnke-*, rem based, so the accessibility font size still works).
   The only dark variant is the one the accessibility panel switches on (data-ax-contrast="dark"). */

:root {
    --wk-bg: #fff;
    --wk-surface: #fff;
    --wk-surface-soft: #f5f7fa;
    --wk-surface-sunken: #eef2f6;
    --wk-text: var(--behnke-black, #303030);
    --wk-text-strong: #1b2129;
    --wk-text-muted: #5b6672;
    --wk-border: #e3e8ee;
    --wk-border-strong: #cdd5df;
    --wk-accent: var(--behnke-design, #004f8b);
    --wk-accent-text: var(--behnke-design, #004f8b);
    --wk-accent-soft: color-mix(in srgb, var(--wk-accent) 8%, #fff);
    --wk-link: #0077bb;
    --wk-code-bg: #f3f6f9;
    --wk-code-text: #1f3d5c;
    --wk-code-border: #dbe2ea;

    --wk-alert-note: #1d4ed8;
    --wk-alert-tip: #166534;
    --wk-alert-important: #6d28d9;
    --wk-alert-warning: #92400e;
    --wk-alert-caution: #b91c1c;
    --wk-alert-tint: 8%;

    --wk-warn-border: #e3b341;
    --wk-warn-bg: #fdf6e3;
    --wk-warn-text: #8a6100;
    --wk-info-border: #9db0c8;
    --wk-info-bg: #f2f6fb;
    --wk-info-text: #3d5470;

    --wk-sidebar-bg: var(--behnke-gradient-connect, linear-gradient(180deg, #145894, #004f8b));
    /* the bars of the Behnke logo (widths 3-73 px, growing), drawn in the text colour of the element */
    --wk-stripes: linear-gradient(90deg, currentColor 0% 1.05%, transparent 1.05% 6.62%, currentColor 6.62% 9.06%, transparent 9.06% 13.24%, currentColor 13.24% 16.38%, transparent 16.38% 20.56%, currentColor 20.56% 24.74%, transparent 24.74% 27.53%, currentColor 27.53% 34.15%, transparent 34.15% 36.93%, currentColor 36.93% 45.3%, transparent 45.3% 47.39%, currentColor 47.39% 57.14%, transparent 57.14% 59.23%, currentColor 59.23% 71.78%, transparent 71.78% 74.56%, currentColor 74.56% 100%);

    --wk-logo-plate: transparent;
    --wk-logo-pad: 0;

    /* angular on purpose: a technical manual, not a soft card */
    --wk-r-s: 0.125rem;
    --wk-r-m: 0.1875rem;
    --wk-r-l: 0.25rem;

    --wk-shadow-1: 0 0 0 1px rgba(16, 24, 40, 0.06);
    --wk-shadow-2: 0 1px 0 rgba(16, 24, 40, 0.10), 0 8px 12px -10px rgba(16, 24, 40, 0.35);
    --wk-accent-fill: var(--behnke-design, #004f8b);
    --wk-shadow-side: inset -1px 0 0 rgba(255, 255, 255, 0.10), 4px 0 16px rgba(0, 30, 60, 0.22);

    /* 4px base at the default font size */
    --wk-s-1: 0.25rem;
    --wk-s-2: 0.5rem;
    --wk-s-3: 0.75rem;
    --wk-s-4: 1rem;
    --wk-s-5: 1.5rem;
    --wk-s-6: 2rem;
    --wk-s-8: 3rem;

    --wk-fs-body: max(var(--behnke-normal-font-size), 0.97rem);
    --wk-fs-small: max(calc(0.9 * var(--behnke-normal-font-size)), 0.85rem);
    --wk-measure: 43rem;
    --wk-lh-body: 1.65;
    --wk-lh-tight: 1.25;
    --wk-weight-body: 400;

    --wk-dur-1: 120ms;
    --wk-dur-2: 200ms;
    --wk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media screen {
    :root[data-ax-contrast="dark"] {
        color-scheme: dark;
        --wk-bg: #12151a;
        --wk-surface: #1a1f2b;
        --wk-surface-soft: #161b24;
        --wk-surface-sunken: #0e1116;
        --wk-text: #d4dce8;
        --wk-text-strong: #e8edf5;
        --wk-text-muted: #9aa7ba;
        --wk-border: #2d3545;
        --wk-border-strong: #3a4559;
        --wk-accent: #8fc2f7;
        --wk-accent-text: #8fc2f7;
        --wk-accent-soft: color-mix(in srgb, #8fc2f7 10%, #12151a);
        --wk-link: #7eb9f5;
        --wk-code-bg: #1e2636;
        --wk-code-text: #c9d8f0;
        --wk-code-border: #2d3e5a;
        --wk-shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
        --wk-shadow-2: 0 1px 0 rgba(0, 0, 0, 0.5), 0 8px 12px -10px rgba(0, 0, 0, 0.6);
        --wk-accent-fill: #2a5d8f;
        --wk-shadow-side: inset -1px 0 0 rgba(255, 255, 255, 0.08), 4px 0 16px rgba(0, 0, 0, 0.5);
        --wk-alert-note: #7db3ff;
        --wk-alert-tip: #5fd38a;
        --wk-alert-important: #b79cff;
        --wk-alert-warning: #f5b04a;
        --wk-alert-caution: #ff8a8a;
        --wk-alert-tint: 16%;
        --wk-sidebar-bg: linear-gradient(180deg, #123f66 0%, #0b2d4d 100%);
        --wk-logo-plate: #fff;
        --wk-logo-pad: 0.75rem;
        --wk-warn-border: #8a6d1f;
        --wk-warn-bg: #2a2410;
        --wk-warn-text: #f0c867;
        --wk-info-border: #4a5f7d;
        --wk-info-bg: #182231;
        --wk-info-text: #a9bdd9;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --wk-dur-1: 0.01ms;
        --wk-dur-2: 0.01ms;
    }
}

:root[data-ax-motion="on"] {
    --wk-dur-1: 0.01ms;
    --wk-dur-2: 0.01ms;
}