/* Clara Day design tokens — the ONE palette (CLA-221).
 *
 * Before this file the product shipped three colour schemes: `#3498db` in main.css,
 * `#007bff` in mobile.css (and in `FieldColors` on Android), and a hardcoded purple
 * gradient on all three login pages. The office web app and the field-staff views were
 * already visually different products.
 *
 * 🚨 This is the only place a colour literal belongs. `main.css` and `mobile.css` consume
 * these and declare none of their own — `tests/web_app/test_brand_tokens.py` fails the
 * build if either grows one back, which is how the palette re-forks.
 *
 * ── The fill / text split ────────────────────────────────────────────────────────────
 *
 * A colour bright enough to be a good fill is usually too bright to carry words. So every
 * hue that needs both has two tokens, and the `-text` one is the only one allowed near
 * type. This is not a new invention: mobile.css already did exactly this for amber, after
 * `--warning-color` (1.63:1) turned out to be unreadable on a phone held outdoors — which
 * is where crews read gate codes.
 *
 * Minimums, from WCAG 2.1: **4.5:1 for text**, **3:1 for UI fills, borders and icons**.
 * Ratios below are measured against white, which is what `--surface` is.
 *
 * 🚨 **Contrast is symmetric, so this cuts both ways.** A token too light to be read ON
 * white is equally too light to be read UNDER white — so `--primary` cannot be the
 * background of a white-text button either, and on a gradient it is the LIGHTEST stop
 * that has to clear the bar. The first pass of CLA-221 got this wrong on the primary
 * sign-in button of all three login pages. Reach for `--primary-hover` (5.22:1) or
 * `--primary-text` (7.04:1) there. `--primary` behind a card, or as a border, is fine.
 *
 *   token                 hex       on white   use
 *   --primary             #007BFF    3.98:1    fills, borders, icons, the app mark
 *   --primary-text        #0056B3    7.04:1    anything with words
 *   --primary-hover       #0069D9    5.22:1    hover fills
 *   --success             #28A745    3.13:1    fills only
 *   --success-text        #1E7E34    5.14:1    anything with words
 *   --danger              #DC3545    4.53:1    fills, and text (it clears 4.5 unaided)
 *   --warning             #FFC107    1.63:1    fills ONLY — never type, at any size
 *   --warning-text        #856404    5.49:1    anything with words
 *   --info                #17A2B8    3.04:1    fills only
 *   --info-text           #117A8B    5.02:1    anything with words
 *   --secondary           #6C757D    4.69:1    fills, and text
 *
 * `--primary` is #007BFF and not main.css's old #3498db because #007BFF was already the
 * value in mobile.css, in `FieldColors.Primary` on Android, and in Bootstrap's own
 * components — so this reconciliation moved one file instead of three. #3498db was also
 * the worst of the candidates at 3.15:1.
 *
 * Android does not read this file. `android/.../ui/theme/FieldTheme.kt` carries the same
 * values by hand, and `docs/BRAND.md` is the record both sides follow.
 */

:root {
    /* Brand */
    --primary: #007BFF;
    --primary-text: #0056B3;
    --primary-hover: #0069D9;

    /* Semantic — the job-status vocabulary and form feedback */
    --secondary: #6C757D;
    --success: #28A745;
    --success-text: #1E7E34;
    --danger: #DC3545;
    --warning: #FFC107;
    --warning-text: #856404;
    --info: #17A2B8;
    --info-text: #117A8B;

    /* Neutrals */
    --surface: #FFFFFF;
    --background: #F5F6F8;
    --border-color: #DEE2E6;
    --light-color: #F8F9FA;
    --dark-color: #343A40;

    /* ── Compatibility aliases ──────────────────────────────────────────────────────
     * main.css and mobile.css grew up apart and named the same idea differently. Rather
     * than rewrite every rule in both files — and re-prove every one of them — the old
     * names alias onto the new ones here, in one place.
     *
     * New code uses the names above. These exist so that reconciling the palette did not
     * also mean touching several hundred unrelated declarations.
     */
    --color-primary: var(--primary);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);
    --color-info: var(--info);

    --primary-color: var(--primary);
    --secondary-color: var(--secondary);
    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --warning-text-color: var(--warning-text);
    --info-color: var(--info);
}