:root {
    --body-bg-rgb: 249,249,249;
    --primary-rgb: 227, 156, 46;
    --secondary-rgb: 241, 56, 139;
    --warning-rgb: 255, 155, 33;
    --info-rgb: 1, 184, 255;
    --success-rgb: 25, 177, 89;
    --danger-rgb: 253, 96, 116;
    --light-rgb: 234, 237, 247;
    --dark-rgb: 59, 72, 99;
    --orange-rgb: 253, 126, 20;
    --pink-rgb: 255, 117, 173;
    --teal-rgb: 0, 204, 204;
    --purple-rgb: 111, 66, 193;

    --default-body-bg-color: rgb(var(--body-bg-rgb));

    --primary-color: rgb(var(--primary-rgb));
    --primary-border: rgb(var(--primary-rgb));
    --primary01: rgba(var(--primary-rgb), 0.1);
    --primary02: rgba(var(--primary-rgb), 0.2);
    --primary03: rgba(var(--primary-rgb), 0.3);
    --primary04: rgba(var(--primary-rgb), 0.4);
    --primary05: rgba(var(--primary-rgb), 0.5);
    --primary06: rgba(var(--primary-rgb), 0.6);
    --primary07: rgba(var(--primary-rgb), 0.7);
    --primary08: rgba(var(--primary-rgb), 0.8);
    --primary09: rgba(var(--primary-rgb), 0.9);
    --primary005: rgba(var(--primary-rgb), 0.05);

    --default-font-family: "Roboto", sans-serif;
    --default-font-weight: 400;
    --default-text-color: #1d212f;
    --default-border: #e8e8f7;
    --default-background: #eaedf7;

    --menu-bg: #fff;
    --menu-prime-color: #536485;
    --menu-border-color: #e8e8f7;

    --header-bg: #fff;
    --header-prime-color: #536485;
    --header-border-color: #e8e8f7;

    --custom-white: #fff;
    --custom-black: #000;
    --bootstrap-card-border: #e8e8f7;
    --list-hover-focus-bg: #f1f2f9;
    --text-muted: #8f8fb1;
    --input-border: #e9edf6;
    --form-control-bg: #ffffff;
    --sidemenu-active-bgcolor: #eaedf7;

    --gray-1: #eaeafb;
    --gray-2: #d0d0ec;
    --gray-3: #babade;
    --gray-4: #8f8fb7;
    --gray-5: #717196;
    --gray-6: #4f4f71;
    --gray-7: #3c3c5d;
    --gray-8: #262644;
    --gray-9: #1b1b33;

    --white-1: rgba(255,255,255, 0.1);
    --white-2: rgba(255,255,255, 0.2);
    --white-3: rgba(255,255,255, 0.3);
    --white-4: rgba(255,255,255, 0.4);
    --white-5: rgba(255,255,255, 0.5);
    --white-6: rgba(255,255,255, 0.6);
    --white-7: rgba(255,255,255, 0.7);
    --white-8: rgba(255,255,255, 0.8);
    --white-9: rgba(255,255,255, 0.9);

    --black-1: rgba(0,0,0, 0.1);
    --black-2: rgba(0,0,0, 0.2);
    --black-3: rgba(0,0,0, 0.3);
    --black-4: rgba(0,0,0, 0.4);
    --black-5: rgba(0,0,0, 0.5);
    --black-6: rgba(0,0,0, 0.6);
    --black-7: rgba(0,0,0, 0.7);
    --black-8: rgba(0,0,0, 0.8);
    --black-9: rgba(0,0,0, 0.9);

    /* ================================================================
       Non-colour scales. Added 2026-07 from the approved Job Manager
       redesign (Claude Design project "Job board redesign proposal",
       Field Installer + Field Marketing treatment 1b).

       Everything above this line is per-tenant. Everything below is
       constant across tenants — it is shape, rhythm and motion, not
       brand. Views should consume these instead of hand-rolling values
       in a style="" attribute.
       ================================================================ */

    /* ---- Type scale ------------------------------------------------
       Half-pixel values are deliberate: they are the exact sizes in the
       signed-off mock. Do not round them without re-checking the design. */
    --fs-micro: 11px;      /* uppercase micro-labels above a stat */
    --fs-tiny: 11.5px;     /* count pills, tile sub-captions */
    --fs-xs: 12px;         /* ID chips */
    --fs-sm: 12.5px;       /* status chips, secondary meta, small buttons */
    --fs-base: 13px;       /* body meta, helper text */
    --fs-md: 13.5px;       /* table cells, list rows */
    --fs-lg: 14px;         /* group / day headers */
    --fs-xl: 20px;         /* inline emphasis numerals */
    --fs-h3: 22px;         /* card title */
    --fs-stat: 26px;       /* stat tile value */
    --fs-stat-lg: 32px;    /* hero percentage */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --ls-label: 0.06em;    /* uppercase micro-label tracking */
    --ls-thead: 0.055em;   /* uppercase table head tracking */
    --ls-heading: -0.01em; /* tightened heading tracking */

    /* Reserved for genuine code / log output only. Do NOT use it for IDs,
       references or postcodes — use .ib-id / .ib-ref, which get aligned digits
       from Roboto's tabular figures instead. On Windows the generic monospace
       fallback is Courier New, which looks wrong next to the body typeface.
       Consolas is listed first for that reason. No webfont download. */
    --font-mono: Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;

    /* ---- Radius ---------------------------------------------------- */
    --radius-xs: 6px;      /* ID chip */
    --radius-sm: 8px;      /* quick-filter button, wide progress bar */
    --radius-md: 10px;     /* stat tiles, inputs, buttons */
    --radius-lg: 12px;     /* table container */
    --radius-xl: 14px;     /* cards */
    --radius-pill: 20px;   /* count pills */
    --radius-circle: 50%;  /* avatars, status dots */

    /* ---- Elevation --------------------------------------------------
       Deliberately NOT derived from --primary-rgb. A cool tint reads as
       neutral depth under every tenant colour, whereas a green tenant
       with green shadows looks wrong. Tokenised so it can still be tuned. */
    --shadow-rgb: 17, 15, 48;
    --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.04);   /* card at rest */
    --shadow-md: 0 4px 14px rgba(var(--shadow-rgb), 0.07);  /* card hover */
    --shadow-lg: 0 8px 28px rgba(var(--shadow-rgb), 0.10);  /* dropdown / popover */
    --shadow-xl: 0 16px 48px rgba(var(--shadow-rgb), 0.16); /* modal */
    --shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), 0.15);

    /* ---- Motion -----------------------------------------------------
       Calm and short. No bounce, no overshoot. */
    --ease-out: cubic-bezier(0.2, 0.6, 0.35, 1);
    --dur-fast: 0.12s;
    --dur-base: 0.16s;
    --dur-slow: 0.28s;
    --lift: translateY(-1px);   /* hover raise */
    --press: translateY(1px);   /* active nudge */

    /* ---- Spacing (4px grid) ---------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Compound paddings lifted straight from the redesign. Slightly
       unusual as tokens, but they are the direct replacement for the
       one-off padding values currently living in style="" attributes. */
    --pad-card: 20px 22px;
    --pad-card-compact: 16px 18px;
    --pad-tile: 12px 14px;
    --pad-cell: 11px 12px;
    --pad-thead: 10px 12px;

    /* ---- Surfaces introduced by the redesign ----------------------- */
    --surface-thead: #fbfbfe;            /* table header band */
    --surface-track: #eceef5;            /* progress / segment track */
    --surface-neutral: #dcdfe9;          /* neutral (unbooked) segment + dot */
    --row-border: var(--list-hover-focus-bg);  /* table row rule */
    --row-hover: var(--primary005);      /* table row hover wash */
}