/* Design tokens - Kolekt brand palette plus the spacing and typography scale.
 * This is the ONLY :root block in the project. Nothing else defines a colour. */
:root {
    /* --- Kolekt primary colours --- */
    --c-green: #AFCA0B;
    --c-blue: #0BBBEF;
    --c-yellow: #FDC300;
    --c-navy: #0B2D44;
    --c-black: #000000;
    --c-white: #FFFFFF;

    /* --- Kolekt secondary colours (never dominate the primary ones) --- */
    --c-green-dark: #007C34;
    --c-blue-dark: #004F7C;
    --c-gray: #9D9D9C;
    /* Derived shade, not a brand colour: hover state for green buttons. */
    --c-green-hover: #9CB50A;
    /* Derived readable gold - brand yellow #FDC300 is unreadable as text on white. */
    --c-yellow-dark: #8A6D00;

    /* --- Recovery phase colours. Collection > Sorting > Destination, used on
     * process badges, the chain diagram and the certificate face so a phase reads
     * the same everywhere in the product. --- */
    --phase-collection: var(--c-blue);
    --phase-sorting: var(--c-yellow);
    --phase-destination: var(--c-green);

    /* --- Ledger state colours. Available is the only one that is money in hand;
     * the rest are states a tonne passes through and should not compete with it. --- */
    --state-available: var(--c-green);
    --state-reserved: var(--c-yellow);
    --state-sold: var(--c-navy);
    --state-chained: var(--c-blue);
    --state-unbacked: var(--c-gray);

    /* --- Semantic colours --- */
    --color-bg: #f5f8f9;
    --color-surface: #ffffff;
    --color-text: #12232e;
    --color-text-muted: #5b6b76;
    --color-border: #e2e8ec;
    /* The section-header strip on the certificate sheet. Was the brand cyan with white
     * lettering, which measured 2.24:1 - under WCAG AA - and the customer read it as
     * unreadable. A light grey keeps the strip reading as a header while the text on it
     * becomes --color-text, the same black as the body it introduces (13.8:1). */
    --color-surface-alt: #e9eef1;
    --color-primary: var(--c-navy);
    --color-accent: var(--c-green);
    --color-danger: #b3261e;
    --color-danger-bg: #fdeceb;
    /* Waiting is not a failure. A document nobody has reviewed yet needs a badge that is visible
     * without reading as an error, so it wears the derived gold rather than red - brand yellow
     * #FDC300 measures 1.6:1 as text and is unreadable. MEASURED against the tint beside it:
     * 4.56:1, over the 4.5 a small bold badge needs. The ceiling for this ink is 4.92:1 on pure
     * white, so the tint has almost no room to go darker; a bigger separation would mean changing
     * the ink, which is a brand decision rather than a CSS tweak. */
    --color-warning: var(--c-yellow-dark);
    --color-warning-bg: #fdf6e3;

    /* --- Typography --- */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
    --fs-100: 0.8125rem;
    --fs-200: 0.9375rem;
    --fs-300: 1rem;
    --fs-400: 1.25rem;
    --fs-500: 1.5rem;
    --fs-600: 2rem;

    /* --- Spacing scale --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* --- Stacking order ---
     * Written down because the header is sticky and two other things have to sit above it in a
     * known order. Two hard-coded numbers were already disagreeing about what "on top" means:
     * 1000 on the header and 50 on the toast stack, which put feedback UNDER the header. */
    --z-sticky: 100;   /* the site header */
    /* A second band that stays put UNDER the header - the proof batch strip. It has to clear
     * the page content it is pinned over, and stay beneath BOTH the header it is pinned to
     * and the reading overlay, which blocks the whole page and therefore has to cover this
     * too. Two sticky things with no declared order is a paint-order coin toss. */
    --z-sticky-sub: 90;
    --z-tip: 200;      /* an info tip beside a heading must clear the header it can sit under */
    --z-modal: 250;   /* an enlarged photograph: over the page, under feedback */
    --z-toast: 300;   /* feedback wins over everything */

    /* One duration for the small state changes; base.css and layout.css had .15s and 0.2s
     * disagreeing about the same gesture. */
    --dur-fast: .15s;

    /* --- Radius, shadow, layout --- */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(11, 45, 68, 0.06), 0 1px 3px rgba(11, 45, 68, 0.08);
    --shadow: 0 8px 24px rgba(11, 45, 68, 0.12);
    --container: 1120px;

    /* How much of the viewport bottom the docked tab bar is standing on. Zero here, and zero
     * everywhere except a narrow screen that actually rendered a bar - layout.css raises it on
     * body.is-bottom-nav inside the breakpoint.
     *
     * It is a token rather than a number in three places because THREE things have to clear the
     * bar: the page itself, the toast stack and, on a phone, the info-tip bubble - all of which
     * sit at the bottom of the viewport. One variable means they cannot drift apart, and a bar
     * that is not there costs them nothing. */
    --bottom-nav-h: 0px;
}