/* Design tokens: the Kolekt brand palette and the type, spacing, radius and shadow scales. Names and
 * values are those of the other Kolekt applications (ported from Epr Wizard's tokens.css), so that the
 * family looks the same; a value changes there and here together.
 * This is the ONLY :root block in the project. */
: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 shade, not a brand colour: hover state for blue action buttons (#0BBBEF darkened). */
    --c-blue-hover: #0AA6D5;

    /* The action colour: what a visitor presses (filled buttons). A green that reports a state is
       NOT this token. */
    --action: var(--c-green);
    --action-hover: var(--c-green-hover);
    --action-ink: var(--c-green-dark);
    /* Derived readable gold - brand yellow #FDC300 is unreadable as text on white. */
    --c-yellow-dark: #8A6D00;

    /* --- Semantic colours --- */
    --color-bg: #f5f8f9;
    --color-surface: #ffffff;
    --color-text: #12232e;
    --color-text-muted: #5b6b76;
    --color-border: #e2e8ec;
    /* A quieter surface for a header strip on a white one; the text on it is --color-text (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: the derived gold rather than red. The ink measures 4.56:1 on the tint
     * beside it and 4.92:1 on pure white, so the tint has almost no room to go darker. */
    --color-warning: var(--c-yellow-dark);
    --color-warning-bg: #fdf6e3;
    /* Two quiet tints for what is neither a warning nor an error: a plain fact (blue) and a settled,
     * good state (green). Ink measured on the tint: 7.9:1 and 4.8:1. */
    --info-bg: #e6f6fd;
    --info-ink: var(--c-blue-dark);
    --success-bg: #eaf6ee;
    --success-ink: var(--c-green-dark);

    /* --- Typography ---
     * Poppins is the family's face. Account loads nothing from another host and ships no font file
     * yet, so a visitor sees the system face unless Poppins is installed. The name stays first so
     * that self-hosted font files, when they are added, change nothing else. */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --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 ---
     * The header is sticky. Whatever has to sit above it later (a tip, a dialog, a toast) gets a named
     * layer here, with the family's number, rather than a number of its own in a rule. */
    --z-sticky: 100;   /* the site header */

    /* --- 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;
    /* The page width: one column, centred, on every screen. */
    --container-page: 65rem;
}