/* Single source of every app color. Three layers, each built on the one above:
     1. Brand      — one input, --color-primary; the whole accent scale is derived from it.
     2. Neutrals   — greys, text, backgrounds, black alphas.
     3. Semantic   — status, QR, sidebar and sign-in surfaces (reference layers 1-2).
   The brand inputs and any white-label overrides live in branding/theme.css (loaded last), never here. */

:root {
    /* ---- 1. Brand ---- */
    /* --color-primary and --color-on-primary are the brand inputs: set in branding/theme.css */
    --color-primary-hover: color-mix(in srgb, var(--color-primary), white 19%);
    --color-primary-light: color-mix(in srgb, var(--color-primary), white 45%);
    --color-primary-20: color-mix(in srgb, var(--color-primary), white 67%);
    --color-primary-10: color-mix(in srgb, var(--color-primary), white 85%);
    --color-primary-5: color-mix(in srgb, var(--color-primary), white 93%);

    /* ---- 2. Neutrals ---- */
    --color-white: #FFFFFF;
    --color-dark: #1c1c1c;
    --color-black-100: #000000;
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-5: rgba(0, 0, 0, 0.05);

    --color-gray-dark: rgba(110, 110, 110, 1);
    --grey-border: #E0E0E0;

    --color-background-1: #F2F2F2;
    --color-background-2: #F7F9FB;
    --color-background-3: #F5F5F5;
    --color-background-dark: #1C1C1C;
    --color-light-bg: #f7f9fb;
    --color-image-bg: #f3ecff;

    --color-text-dark: #313030;
    --color-text-faded-dark: rgba(28, 28, 28, 0.7);
    --color-text-faded-light: rgba(255, 255, 255, 0.4);
    --color-header-divider: rgba(28, 28, 28, 0.1);

    /* ---- 3. Semantic ---- */
    --color-pass: #3BAF72;
    --color-progress: #A8C84E;
    --color-fail: #E05048;

    --qr-right: #B5FFAE;
    --qr-right-rgb: 181, 255, 174;
    --qr-wrong: #FFB8BB;
    --qr-wrong-rgb: 255, 184, 187;

    --stroke-sidebar: rgba(255, 255, 255, 0.10);
    --color-sidebar-divider: rgba(255, 255, 255, 0.1);
    --color-sidebar-hover: rgba(255, 255, 255, 0.05);

    --bg-page: var(--color-white);
    --bg-card: var(--color-dark);
    --bg-input: #141414;
    --text-high: var(--color-white);
    --text-muted: #888888;
    --stroke: #3F3F46;
    --accent: var(--color-primary);
}