/*
 * Anarchy 2 — "Steel Grid" design tokens (architecture §8).
 *
 * Contrast (WCAG 2.2 AA) is part of the contract and is checked by DesignTokenContrastTests, which reads the hex values below:
 *   - Text needs 4.5:1, borders that identify a control and focus rings need 3:1 (1.4.11).
 *   - --a2-blue, --a2-steel-3 and the plain status colours are for fills, lines and glows. Text uses the -text variants.
 *   - --a2-text-dim stays readable on every surface up to --a2-steel-2; controls (input borders) must not sit on --a2-steel-2 or lighter.
 */
:root {
    color-scheme: dark;

    /* Surfaces */
    --a2-bg-0: #07090d;
    --a2-bg-1: #0c1119;
    --a2-bg-2: #121a26;
    --a2-steel-1: #1c2533;
    --a2-steel-2: #2a3546;
    --a2-steel-3: #4a5668;
    --a2-navy: #0f2747;
    --a2-border-control: #6b7a90;

    /* Text */
    --a2-text: #d7dee8;
    --a2-text-dim: #9aa6b8;

    /* Brand */
    --a2-blue: #1e5eff;
    --a2-blue-text: #6c9bff;
    --a2-on-blue: #ffffff;
    --a2-energy: #2ee6ff;
    --a2-on-energy: var(--a2-bg-0);
    --a2-energy-glow: 0 0 12px rgb(46 230 255 / .45);

    /* Status */
    --a2-warn: #ffb020;
    --a2-on-warn: var(--a2-bg-0);
    --a2-danger: #ff3b5c;
    --a2-danger-text: #ff7a92;
    --a2-danger-fill: #d01a44;
    --a2-on-danger-fill: #ffffff;
    --a2-danger-glow: 0 0 12px rgb(255 59 92 / .45);
    --a2-ok: #3dffa8;
    --a2-on-ok: var(--a2-bg-0);

    /* One colour per permission flag (the badge always names the flag as well; colour never carries the meaning alone) */
    --a2-flag-standard: #9aa6b8;
    --a2-flag-tester: #3dffa8;
    --a2-flag-developer: #b794ff;
    --a2-flag-admin: #ff7a92;

    /* Shape */
    --a2-radius: 2px;
    --a2-clip: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    --a2-clip-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    /* The same shapes for a layer inset by 1 px (a 1 px edge): the cut shrinks by 1 x (2 - sqrt 2), so the edge stays 1 px thick along the diagonals too */
    --a2-clip-inner: polygon(0 0, calc(100% - 13.4px) 0, 100% 13.4px, 100% 100%, 13.4px 100%, 0 calc(100% - 13.4px));
    --a2-clip-sm-inner: polygon(0 0, calc(100% - 7.4px) 0, 100% 7.4px, 100% 100%, 7.4px 100%, 0 calc(100% - 7.4px));

    /* Typography (self-hosted, see fonts.css) */
    --a2-font-display: "Rajdhani", "Orbitron", system-ui, sans-serif;
    --a2-font-body: "Inter", system-ui, sans-serif;
    --a2-font-mono: "JetBrains Mono", ui-monospace, monospace;

    --a2-text-xs: .75rem;
    --a2-text-sm: .875rem;
    --a2-text-md: 1rem;
    --a2-text-lg: 1.125rem;
    --a2-text-xl: 1.375rem;
    --a2-text-2xl: 1.75rem;
    --a2-text-3xl: 2.25rem;
    --a2-text-4xl: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);

    /* Spacing */
    --a2-space-1: .25rem;
    --a2-space-2: .5rem;
    --a2-space-3: .75rem;
    --a2-space-4: 1rem;
    --a2-space-5: 1.5rem;
    --a2-space-6: 2rem;
    --a2-space-7: 3rem;
    --a2-space-8: 4rem;
    --a2-gutter: clamp(1rem, 4vw, 2rem);

    /* Depth */
    --a2-shadow-panel: 0 10px 28px rgb(0 0 0 / .5);
    --a2-z-nav: 100;
    --a2-z-modal: 1000;
    --a2-z-toast: 1100;
    --a2-z-overlay: 9000;

    /* Motion: all zero under prefers-reduced-motion (below) */
    --a2-dur-fast: 120ms;
    --a2-dur: 200ms;
    --a2-dur-slow: 420ms;
    --a2-ease: cubic-bezier(.2, .7, .2, 1);

    /* Textures. Root-relative on purpose: a url() in a custom property is not resolved the same way by every browser. */
    --a2-tex-noise: url("/img/noise.svg");
    --a2-tex-brushed: repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px);
    --a2-surface-panel: var(--a2-tex-brushed), linear-gradient(180deg, rgb(255 255 255 / .04), transparent 38%), linear-gradient(180deg, var(--a2-steel-1), var(--a2-bg-2));
}

@media (prefers-contrast: more) {
    :root {
        --a2-text-dim: #c0cad8;
        --a2-steel-3: #8392a8;
        --a2-border-control: #9aa9be;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --a2-dur-fast: 0ms;
        --a2-dur: 0ms;
        --a2-dur-slow: 0ms;
    }
}