/*
 * ARVEE design tokens.
 * ============================================================================
 *
 * Two things live here, and they exist for the same reason: so that no Python
 * file, no view and no template ever holds a colour again.
 *
 *   1. The ROLE VARIABLES. static/js/brand-palette.js turns these into real
 *      Tailwind colours (bg-surface, text-body, border-subtle, bg-brand), so
 *      variants and opacity modifiers work on them. They are the one block a
 *      future dark theme swaps -- which is why they hold space-separated RGB
 *      triples rather than hex: that is the only form Tailwind's <alpha-value>
 *      placeholder can compose with.
 *
 *      Each variable mirrors a specific ramp stop (noted alongside). A Django
 *      test asserts they still match the ramp, because a triple that drifts
 *      from the ramp it mirrors is a second source of truth wearing a token's
 *      clothes -- and it would drift silently, since nothing at runtime checks.
 *
 *   2. The COMPONENT CLASSES (.badge-*, .btn-*, .card-*). Written as PLAIN CSS
 *      against the ramps, deliberately not as Tailwind @apply and deliberately
 *      not as composed utility strings. Three reasons, and the first is a bug
 *      this codebase already has:
 *
 *      - Tailwind's JIT only emits a class it can SEE in the content scan.
 *        service/tags/skill_badge.html writes "bg-{{ color }}-100", which the
 *        scanner reads as the literal string "bg-{{ color }}-100" -- it emits
 *        nothing, and those badges render only because the same classes happen
 *        to appear elsewhere in the app. Every status pill built by composing
 *        class names in Python has the same latent failure. A plain CSS class
 *        cannot be purged, so this whole category disappears.
 *      - @apply would not work: DEBUG serves Tailwind from the Play CDN, which
 *        never processes this file, so @apply would silently emit nothing in
 *        development and work in production. Plain CSS behaves identically in
 *        both.
 *      - Python then emits a ROLE NAME ("warning-solid") and nothing else. The
 *        colour decision lives in one config; adding a status is one line.
 *
 *      TWO RULES FOR EVERY COMPONENT RULE IN THIS FILE. Both were paid for in
 *      production, by the same bug, and neither shows up in development:
 *
 *      (a) NEVER the `background:` shorthand -- always `background-color:`.
 *          The shorthand resets background-image/-repeat/-size/-position. The
 *          status pill is a <select> with `appearance-none` and its own chevron
 *          painted by an inline background-image, sized by `bg-no-repeat` +
 *          `bg-[length:12px_12px]` + `bg-[right_6px_center]`. One
 *          `background: #E4E7E5` reset all three, and the chevron TILED across
 *          the whole control -- dozens of arrows per pill, with the label drawn
 *          on top of them.
 *
 *      (b) EVERY selector is written `html body :where(.thing)`, which is
 *          specificity (0,0,2), and it has to land in exactly that window --
 *          main.css's `html select` trick, applied to components.
 *
 *          The reason is that a component rule has TWO opponents pulling in
 *          opposite directions, and beating one is not the same as beating the
 *          other:
 *
 *              a Tailwind utility, .px-2\.5     (0,1,0)  MUST WIN over us
 *              Preflight's reset, `button`      (0,0,1)  MUST LOSE to us
 *              Preflight's reset, `*`           (0,0,0)  MUST LOSE to us
 *
 *          A bare `.badge--neutral` is (0,1,0) -- *identical* to a utility --
 *          so the winner is decided purely by source order, and THE ORDER IS
 *          INVERTED BETWEEN ENVIRONMENTS: production links the built
 *          tailwind.css BEFORE this file, while DEBUG's Play CDN injects its
 *          styles at runtime, i.e. AFTER every <link>. Measured on the real
 *          files:
 *
 *              production   background-repeat: repeat     padding: 2px 8px
 *              development  background-repeat: no-repeat  padding: 4px 10px
 *
 *          Development showed the correct answer, which is why that reached
 *          customers. But the obvious repair -- a bare `:where(.badge)`, at
 *          (0,0,0) -- overshoots and loses to Preflight, which is not a
 *          utility and is not optional: `button{background-color:transparent;
 *          padding:0}` and `*{border-width:0}` then beat every component rule
 *          in this file. The RO list's status filter pills are <button>s, and
 *          they rendered with no background, no padding and black text, in
 *          BOTH environments; every badge lost its border in DEBUG only, which
 *          is the same environment-split the wrap was meant to end.
 *
 *          `html body ` restores exactly two type selectors -- above both
 *          Preflight forms, below any single utility class -- and, because it
 *          wins and loses on specificity rather than on order, it behaves
 *          identically in the two environments.
 *
 *      Both are pinned by core/tests/test_branding.py, and the pills are
 *      checked as rendered by playwright_tests/core/test_branding.py.
 *
 * Loaded by core/templates/core/partials/_styles.html, after Tailwind and
 * before main.css.
 */

:root {
    /* Role tokens -- see static/js/brand-palette.js TOKEN_SOURCES. */
    --surface: 255 255 255;        /* neutral-0    #FFFFFF  cards            */
    --surface-sunk: 244 246 245;   /* neutral-50   #F4F6F5  page bg, wells   */
    --border: 228 231 229;         /* neutral-200  #E4E7E5                   */
    --text-body: 43 46 45;         /* neutral-900  #2B2E2D                   */
    --text-muted: 90 96 94;        /* neutral-600  #5A605E                   */
    --brand: 62 115 108;           /* primary-500  #3E736C                   */
    --brand-ink: 31 58 56;         /* primary-900  #1F3A38  trust surfaces   */
}

/* ── Theme variables (generated) ─────────────────────────────────────────────
 *
 * The block below is written by `manage.py build_theme_css` from the transform
 * in core/branding.py, which derives every dark value from the light ramps in
 * brand-palette.js. Do not hand-edit it; a test asserts the checked-in text
 * matches the generator, because ~380 hand-authored hexes is ~380 chances for
 * dark mode to disagree with the palette it is supposed to be a theme of.
 *
 * WHY THE RAMPS AND NOT JUST THE ROLE TOKENS ABOVE. The comment at the top of
 * this file promises the seven role tokens are "the one block a future dark
 * theme swaps". They are not, and the number is worth writing down: this app
 * uses 27,209 colour utilities across 799 templates and exactly 87 of them are
 * role tokens. Swapping those seven variables themes 0.3% of the app. So dark
 * mode redefines what the RAMP STOPS mean, which is the same trade branding
 * made one level up ("blue IS the primary ramp") -- no template edits, and all
 * 27,209 utilities move.
 *
 * WHY FOUR SCOPES PER STOP. In dark mode a stop stops being one colour:
 *
 *     text-gray-700     2,441 uses   must go LIGHT
 *     bg-gray-700/-800    ~530 uses  must stay DARK (all `text-white` buttons)
 *
 * CSS cannot condition a custom property on which property reads it, but
 * Tailwind can: textColor / backgroundColor / borderColor are separate theme
 * keys, so each resolves through its own variable (--t-, --bg-, --bd-, with
 * --c- as the base for rings and accents). That is what buys every `hover:`
 * variant and every `/50` modifier for free, and it is why none of this needs a
 * CSS carve-out -- nothing here has to fight the specificity window the
 * component rules below live in.
 *
 * Light mode declares only the base scope; the other three reach it through a
 * `var(--t-x, var(--c-x))` fallback in the Tailwind config. So light mode is
 * the palette that already shipped, byte for byte, and the dark block's
 * overrides read as a list of exactly where a role diverges.
 */
/* >>> GENERATED THEME VARIABLES -- edit core/branding.py, not this. */

:root {
    /* Light: one value per stop. The text/bg/border scopes fall back
       to these, so light mode is exactly the palette that shipped. */
    color-scheme: light;

    /* neutral */
    --c-neutral-0: 255 255 255;
    --c-neutral-50: 244 246 245;
    --c-neutral-100: 239 241 240;
    --c-neutral-200: 228 231 229;
    --c-neutral-300: 196 200 197;
    --c-neutral-400: 154 160 157;
    --c-neutral-500: 127 133 130;
    --c-neutral-600: 90 96 94;
    --c-neutral-700: 78 83 82;
    --c-neutral-800: 63 68 66;
    --c-neutral-900: 43 46 45;
    --c-neutral-950: 32 34 34;
    /* primary */
    --c-primary-50: 237 244 242;
    --c-primary-100: 207 224 221;
    --c-primary-200: 173 199 194;
    --c-primary-300: 127 168 162;
    --c-primary-400: 101 145 138;
    --c-primary-500: 62 115 108;
    --c-primary-600: 55 101 96;
    --c-primary-700: 46 85 81;
    --c-primary-800: 39 73 70;
    --c-primary-900: 31 58 56;
    --c-primary-950: 22 44 43;
    /* sand */
    --c-sand-50: 250 243 234;
    --c-sand-100: 242 228 210;
    --c-sand-200: 233 213 188;
    --c-sand-300: 224 196 163;
    --c-sand-400: 212 177 140;
    --c-sand-500: 199 154 110;
    --c-sand-600: 160 119 79;
    --c-sand-700: 138 106 74;
    --c-sand-800: 119 90 63;
    --c-sand-900: 94 70 50;
    --c-sand-950: 73 54 38;
    /* sage */
    --c-sage-50: 238 242 233;
    --c-sage-100: 214 225 201;
    --c-sage-200: 195 211 183;
    --c-sage-300: 174 196 162;
    --c-sage-400: 152 177 139;
    --c-sage-500: 124 154 110;
    --c-sage-600: 103 129 91;
    --c-sage-700: 85 112 75;
    --c-sage-800: 74 97 65;
    --c-sage-900: 60 74 51;
    --c-sage-950: 46 57 39;
    /* success */
    --c-success-50: 239 246 241;
    --c-success-100: 220 234 225;
    --c-success-200: 198 215 204;
    --c-success-300: 172 194 180;
    --c-success-400: 139 170 150;
    --c-success-500: 91 140 110;
    --c-success-600: 78 121 94;
    --c-success-700: 66 104 81;
    --c-success-800: 56 87 68;
    --c-success-900: 36 56 44;
    --c-success-950: 26 43 33;
    /* warning */
    --c-warning-50: 251 244 230;
    --c-warning-100: 245 231 204;
    --c-warning-200: 235 215 183;
    --c-warning-300: 224 197 158;
    --c-warning-400: 213 177 126;
    --c-warning-500: 201 154 78;
    --c-warning-600: 168 124 54;
    --c-warning-700: 136 99 42;
    --c-warning-800: 104 75 29;
    --c-warning-900: 74 54 17;
    --c-warning-950: 57 41 11;
    /* danger */
    --c-danger-50: 251 237 233;
    --c-danger-100: 243 217 208;
    --c-danger-200: 232 197 187;
    --c-danger-300: 219 173 162;
    --c-danger-400: 206 145 130;
    --c-danger-500: 192 106 84;
    --c-danger-600: 172 94 74;
    --c-danger-700: 142 75 58;
    --c-danger-800: 119 56 44;
    --c-danger-900: 74 35 24;
    --c-danger-950: 57 26 17;
    /* info */
    --c-info-50: 240 245 248;
    --c-info-100: 217 228 234;
    --c-info-200: 195 209 217;
    --c-info-300: 170 187 199;
    --c-info-400: 139 162 178;
    --c-info-500: 94 130 153;
    --c-info-600: 84 116 137;
    --c-info-700: 69 96 115;
    --c-info-800: 58 80 95;
    --c-info-900: 37 51 60;
    --c-info-950: 27 39 46;

    /* `bg-white` is 1,551 of this app's surfaces and has to move in dark
       mode; `text-white` is 1,058 uses that sit on coloured fills and
       must not. Only the background scope is a variable. */
    --bg-white: 255 255 255;

    /* Component colours that are not ramp stops -- see COUNT_TINT_LIGHT. */
    --badge-count-tint: rgb(0 0 0 / 0.08);
}

:root[data-theme="dark"] {
    /* Stamped by static/js/theme.js before first paint. There is
       deliberately no @media (prefers-color-scheme) copy of this block:
       theme.js resolves the OS preference itself and always writes a
       concrete light/dark value, so the toggle and the stylesheet can
       never disagree about which theme is on. */

    /* Not decoration: this is what darkens the parts of the page the
       app does not paint -- the scrollbars, the native <select> option
       list, date and colour pickers, autofilled field backgrounds and
       the canvas behind everything. Without it a dark page scrolls on a
       white scrollbar and every dropdown opens white. */
    color-scheme: dark;

    /* neutral */
    --c-neutral-0: 255 255 255;
    --t-neutral-0: 255 255 255;
    --bg-neutral-0: 31 36 35;
    --bd-neutral-0: 44 50 49;
    --c-neutral-50: 240 243 242;
    --t-neutral-50: 240 243 242;
    --bg-neutral-50: 26 30 29;
    --bd-neutral-50: 31 36 35;
    --c-neutral-100: 228 232 231;
    --t-neutral-100: 233 237 236;
    --bg-neutral-100: 21 25 24;
    --bd-neutral-100: 37 42 41;
    --c-neutral-200: 211 216 215;
    --t-neutral-200: 221 226 225;
    --bg-neutral-200: 39 44 43;
    --bd-neutral-200: 44 50 49;
    --c-neutral-300: 185 192 190;
    --t-neutral-300: 114 122 120;
    --bg-neutral-300: 49 55 54;
    --bd-neutral-300: 74 82 80;
    --c-neutral-400: 156 164 161;
    --t-neutral-400: 134 142 140;
    --bg-neutral-400: 59 66 65;
    --bd-neutral-400: 82 90 88;
    --c-neutral-500: 138 146 145;
    --t-neutral-500: 156 164 161;
    --bg-neutral-500: 69 77 75;
    --bd-neutral-500: 94 103 101;
    --c-neutral-600: 118 126 124;
    --t-neutral-600: 181 188 186;
    --bg-neutral-600: 78 86 84;
    --bd-neutral-600: 106 116 114;
    --c-neutral-700: 100 108 106;
    --t-neutral-700: 213 218 217;
    --bg-neutral-700: 86 94 92;
    --bd-neutral-700: 118 127 125;
    --c-neutral-800: 86 94 92;
    --t-neutral-800: 231 235 234;
    --bg-neutral-800: 94 103 101;
    --bd-neutral-800: 130 139 137;
    --c-neutral-900: 69 77 75;
    --t-neutral-900: 242 245 244;
    --bg-neutral-900: 102 112 109;
    --bd-neutral-900: 142 151 149;
    --c-neutral-950: 58 65 64;
    --t-neutral-950: 247 249 248;
    --bg-neutral-950: 110 120 118;
    --bd-neutral-950: 154 163 161;
    /* primary */
    --c-primary-50: 237 244 242;
    --t-primary-50: 237 244 242;
    --bg-primary-50: 26 40 38;
    --bd-primary-50: 25 38 36;
    --c-primary-100: 207 224 221;
    --t-primary-100: 207 224 221;
    --bg-primary-100: 29 48 45;
    --bd-primary-100: 29 48 45;
    --c-primary-200: 173 199 194;
    --t-primary-200: 173 199 194;
    --bg-primary-200: 35 60 56;
    --bd-primary-200: 36 62 58;
    --c-primary-300: 127 168 162;
    --t-primary-300: 127 168 162;
    --bg-primary-300: 42 75 71;
    --bd-primary-300: 43 77 72;
    --c-primary-400: 101 145 138;
    --t-primary-400: 101 145 138;
    --bg-primary-400: 50 92 86;
    --bd-primary-400: 51 93 88;
    --c-primary-500: 127 168 162;
    --t-primary-500: 127 168 162;
    --bg-primary-500: 62 115 108;
    --bd-primary-500: 112 142 137;
    --c-primary-600: 150 181 177;
    --t-primary-600: 150 181 177;
    --bg-primary-600: 55 101 96;
    --bd-primary-600: 129 153 150;
    --c-primary-700: 173 199 194;
    --t-primary-700: 173 199 194;
    --bg-primary-700: 46 85 81;
    --bd-primary-700: 143 164 161;
    --c-primary-800: 207 224 221;
    --t-primary-800: 207 224 221;
    --bg-primary-800: 44 83 79;
    --bd-primary-800: 156 173 171;
    --c-primary-900: 237 244 242;
    --t-primary-900: 237 244 242;
    --bg-primary-900: 42 79 75;
    --bd-primary-900: 168 182 180;
    --c-primary-950: 243 247 246;
    --t-primary-950: 243 247 246;
    --bg-primary-950: 40 77 73;
    --bd-primary-950: 178 191 189;
    /* sand */
    --c-sand-50: 250 243 234;
    --t-sand-50: 250 243 234;
    --bg-sand-50: 61 50 38;
    --bd-sand-50: 57 47 36;
    --c-sand-100: 242 228 210;
    --t-sand-100: 242 228 210;
    --bg-sand-100: 77 61 45;
    --bd-sand-100: 77 61 45;
    --c-sand-200: 233 213 188;
    --t-sand-200: 233 213 188;
    --bg-sand-200: 101 79 57;
    --bd-sand-200: 106 82 59;
    --c-sand-300: 224 196 163;
    --t-sand-300: 224 196 163;
    --bg-sand-300: 130 101 72;
    --bd-sand-300: 133 103 74;
    --c-sand-400: 212 177 140;
    --t-sand-400: 212 177 140;
    --bg-sand-400: 159 123 88;
    --bd-sand-400: 161 125 89;
    --c-sand-500: 224 196 163;
    --t-sand-500: 224 196 163;
    --bg-sand-500: 199 154 110;
    --bd-sand-500: 207 170 139;
    --c-sand-600: 228 204 177;
    --t-sand-600: 228 204 177;
    --bg-sand-600: 160 119 79;
    --bd-sand-600: 211 178 151;
    --c-sand-700: 233 213 188;
    --t-sand-700: 233 213 188;
    --bg-sand-700: 138 106 74;
    --bd-sand-700: 214 185 161;
    --c-sand-800: 242 228 210;
    --t-sand-800: 242 228 210;
    --bg-sand-800: 138 105 74;
    --bd-sand-800: 218 192 171;
    --c-sand-900: 250 243 234;
    --t-sand-900: 250 243 234;
    --bg-sand-900: 135 103 73;
    --bd-sand-900: 221 198 181;
    --c-sand-950: 252 247 241;
    --t-sand-950: 252 247 241;
    --bg-sand-950: 134 102 73;
    --bd-sand-950: 225 205 189;
    /* sage */
    --c-sage-50: 238 242 233;
    --t-sage-50: 238 242 233;
    --bg-sage-50: 40 50 38;
    --bd-sage-50: 38 47 36;
    --c-sage-100: 214 225 201;
    --t-sage-100: 214 225 201;
    --bg-sage-100: 49 61 45;
    --bd-sage-100: 49 61 45;
    --c-sage-200: 195 211 183;
    --t-sage-200: 195 211 183;
    --bg-sage-200: 63 79 57;
    --bd-sage-200: 66 82 59;
    --c-sage-300: 174 196 162;
    --t-sage-300: 174 196 162;
    --bg-sage-300: 80 101 72;
    --bd-sage-300: 82 103 74;
    --c-sage-400: 152 177 139;
    --t-sage-400: 152 177 139;
    --bg-sage-400: 99 123 88;
    --bd-sage-400: 100 125 89;
    --c-sage-500: 174 196 162;
    --t-sage-500: 174 196 162;
    --bg-sage-500: 124 154 110;
    --bd-sage-500: 148 170 139;
    --c-sage-600: 186 204 177;
    --t-sage-600: 186 204 177;
    --bg-sage-600: 103 129 91;
    --bd-sage-600: 159 178 151;
    --c-sage-700: 195 211 183;
    --t-sage-700: 195 211 183;
    --bg-sage-700: 85 112 75;
    --bd-sage-700: 168 185 161;
    --c-sage-800: 214 225 201;
    --t-sage-800: 214 225 201;
    --bg-sage-800: 86 110 76;
    --bd-sage-800: 177 192 171;
    --c-sage-900: 238 242 233;
    --t-sage-900: 238 242 233;
    --bg-sage-900: 84 104 73;
    --bd-sage-900: 186 198 181;
    --c-sage-950: 243 246 240;
    --t-sage-950: 243 246 240;
    --bg-sage-950: 83 103 73;
    --bd-sage-950: 194 205 189;
    /* success */
    --c-success-50: 239 246 241;
    --t-success-50: 239 246 241;
    --bg-success-50: 32 46 38;
    --bd-success-50: 30 44 36;
    --c-success-100: 220 234 225;
    --t-success-100: 220 234 225;
    --bg-success-100: 38 56 45;
    --bd-success-100: 38 56 45;
    --c-success-200: 198 215 204;
    --t-success-200: 198 215 204;
    --bg-success-200: 47 72 57;
    --bd-success-200: 49 75 59;
    --c-success-300: 172 194 180;
    --t-success-300: 172 194 180;
    --bg-success-300: 59 91 72;
    --bd-success-300: 61 94 74;
    --c-success-400: 139 170 150;
    --t-success-400: 139 170 150;
    --bg-success-400: 73 112 88;
    --bd-success-400: 74 113 89;
    --c-success-500: 172 194 180;
    --t-success-500: 172 194 180;
    --bg-success-500: 91 140 110;
    --bd-success-500: 127 160 139;
    --c-success-600: 185 203 191;
    --t-success-600: 185 203 191;
    --bg-success-600: 78 121 94;
    --bd-success-600: 141 169 151;
    --c-success-700: 198 215 204;
    --t-success-700: 198 215 204;
    --bg-success-700: 66 104 81;
    --bd-success-700: 153 177 161;
    --c-success-800: 220 234 225;
    --t-success-800: 220 234 225;
    --bg-success-800: 64 99 78;
    --bd-success-800: 164 185 171;
    --c-success-900: 239 246 241;
    --t-success-900: 239 246 241;
    --bg-success-900: 58 90 70;
    --bd-success-900: 175 192 181;
    --c-success-950: 244 249 245;
    --t-success-950: 244 249 245;
    --bg-success-950: 58 91 71;
    --bd-success-950: 184 199 189;
    /* warning */
    --c-warning-50: 251 244 230;
    --t-warning-50: 251 244 230;
    --bg-warning-50: 62 50 31;
    --bd-warning-50: 58 47 30;
    --c-warning-100: 245 231 204;
    --t-warning-100: 245 231 204;
    --bg-warning-100: 78 61 35;
    --bd-warning-100: 78 61 35;
    --c-warning-200: 235 215 183;
    --t-warning-200: 235 215 183;
    --bg-warning-200: 103 79 43;
    --bd-warning-200: 107 82 44;
    --c-warning-300: 224 197 158;
    --t-warning-300: 224 197 158;
    --bg-warning-300: 131 101 52;
    --bd-warning-300: 134 103 53;
    --c-warning-400: 213 177 126;
    --t-warning-400: 213 177 126;
    --bg-warning-400: 160 123 63;
    --bd-warning-400: 163 125 64;
    --c-warning-500: 224 197 158;
    --t-warning-500: 224 197 158;
    --bg-warning-500: 201 154 78;
    --bd-warning-500: 208 170 120;
    --c-warning-600: 228 205 174;
    --t-warning-600: 228 205 174;
    --bg-warning-600: 168 124 54;
    --bd-warning-600: 212 178 135;
    --c-warning-700: 235 215 183;
    --t-warning-700: 235 215 183;
    --bg-warning-700: 136 99 42;
    --bd-warning-700: 216 185 148;
    --c-warning-800: 245 231 204;
    --t-warning-800: 245 231 204;
    --bg-warning-800: 129 96 43;
    --bd-warning-800: 219 192 160;
    --c-warning-900: 251 244 230;
    --t-warning-900: 251 244 230;
    --bg-warning-900: 127 96 44;
    --bd-warning-900: 222 198 171;
    --c-warning-950: 252 247 238;
    --t-warning-950: 252 247 238;
    --bg-warning-950: 131 99 47;
    --bd-warning-950: 226 205 181;
    /* danger */
    --c-danger-50: 251 237 233;
    --t-danger-50: 251 237 233;
    --bg-danger-50: 67 36 29;
    --bd-danger-50: 62 34 28;
    --c-danger-100: 243 217 208;
    --t-danger-100: 243 217 208;
    --bg-danger-100: 85 41 31;
    --bd-danger-100: 85 41 31;
    --c-danger-200: 232 197 187;
    --t-danger-200: 232 197 187;
    --bg-danger-200: 111 51 36;
    --bd-danger-200: 115 53 37;
    --c-danger-300: 219 173 162;
    --t-danger-300: 219 173 162;
    --bg-danger-300: 141 63 43;
    --bd-danger-300: 145 65 44;
    --c-danger-400: 206 145 130;
    --t-danger-400: 206 145 130;
    --bg-danger-400: 173 77 51;
    --bd-danger-400: 176 78 52;
    --c-danger-500: 219 173 162;
    --t-danger-500: 219 173 162;
    --bg-danger-500: 192 106 84;
    --bd-danger-500: 222 130 113;
    --c-danger-600: 224 185 177;
    --t-danger-600: 224 185 177;
    --bg-danger-600: 172 94 74;
    --bd-danger-600: 224 143 129;
    --c-danger-700: 232 197 187;
    --t-danger-700: 232 197 187;
    --bg-danger-700: 142 75 58;
    --bd-danger-700: 227 155 144;
    --c-danger-800: 243 217 208;
    --t-danger-800: 243 217 208;
    --bg-danger-800: 143 65 48;
    --bd-danger-800: 229 166 156;
    --c-danger-900: 251 237 233;
    --t-danger-900: 251 237 233;
    --bg-danger-900: 135 60 39;
    --bd-danger-900: 232 176 168;
    --c-danger-950: 252 243 240;
    --t-danger-950: 252 243 240;
    --bg-danger-950: 140 61 39;
    --bd-danger-950: 234 185 179;
    /* info */
    --c-info-50: 240 245 248;
    --t-info-50: 240 245 248;
    --bg-info-50: 32 43 49;
    --bd-info-50: 31 41 46;
    --c-info-100: 217 228 234;
    --t-info-100: 217 228 234;
    --bg-info-100: 39 53 61;
    --bd-info-100: 39 53 61;
    --c-info-200: 195 209 217;
    --t-info-200: 195 209 217;
    --bg-info-200: 49 67 79;
    --bd-info-200: 51 70 82;
    --c-info-300: 170 187 199;
    --t-info-300: 170 187 199;
    --bg-info-300: 61 85 100;
    --bd-info-300: 63 87 102;
    --c-info-400: 139 162 178;
    --t-info-400: 139 162 178;
    --bg-info-400: 75 104 122;
    --bd-info-400: 76 105 124;
    --c-info-500: 170 187 199;
    --t-info-500: 170 187 199;
    --bg-info-500: 94 130 153;
    --bd-info-500: 129 153 170;
    --c-info-600: 183 197 207;
    --t-info-600: 183 197 207;
    --bg-info-600: 84 116 137;
    --bd-info-600: 142 162 177;
    --c-info-700: 195 209 217;
    --t-info-700: 195 209 217;
    --bg-info-700: 69 96 115;
    --bd-info-700: 154 171 184;
    --c-info-800: 217 228 234;
    --t-info-800: 217 228 234;
    --bg-info-800: 66 92 108;
    --bd-info-800: 165 180 191;
    --c-info-900: 240 245 248;
    --t-info-900: 240 245 248;
    --bg-info-900: 60 83 98;
    --bd-info-900: 176 188 198;
    --c-info-950: 245 248 250;
    --t-info-950: 245 248 250;
    --bg-info-950: 60 84 100;
    --bd-info-950: 185 196 204;

    /* white: the background scope only -- see the light block. */
    --bg-white: 31 36 35;

    --badge-count-tint: rgb(255 255 255 / 0.12);

    /* The seven legacy role tokens, pointed at the bands that
       mean the same thing. */
    --surface: 31 36 35;
    --surface-sunk: 26 30 29;
    --border: 44 50 49;
    --text-body: 242 245 244;
    --text-muted: 181 188 186;
}

/* <<< END GENERATED THEME VARIABLES */

/* ── Badges / status pills ───────────────────────────────────────────────────
 *
 * One class per role. `tint` is the quiet default; `solid` is reserved for the
 * few states worth spotting across a room. Solid uses the -700 stop because
 * that is where white text clears WCAG AA in every one of the eight families
 * (warning-500 manages only 2.6:1 against white, which is why it is not used).
 *
 * Roles, not families, because WorkOrder.STATUS_COLOR needs 11 distinguishable
 * pills and the palette has 8 families.
 */
html body :where(.badge) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

html body :where(.badge--neutral)       { background-color: rgb(var(--bg-neutral-200, var(--c-neutral-200))); color: rgb(var(--t-neutral-900, var(--c-neutral-900))); border-color: rgb(var(--bd-neutral-300, var(--c-neutral-300))); }
html body :where(.badge--neutral-solid) { background-color: rgb(var(--bg-neutral-700, var(--c-neutral-700))); color: #FFFFFF; }
html body :where(.badge--primary)       { background-color: rgb(var(--bg-primary-100, var(--c-primary-100))); color: rgb(var(--t-primary-900, var(--c-primary-900))); border-color: rgb(var(--bd-primary-200, var(--c-primary-200))); }
html body :where(.badge--primary-solid) { background-color: rgb(var(--bg-primary-700, var(--c-primary-700))); color: #FFFFFF; }
html body :where(.badge--sand)          { background-color: rgb(var(--bg-sand-100, var(--c-sand-100))); color: rgb(var(--t-sand-900, var(--c-sand-900))); border-color: rgb(var(--bd-sand-200, var(--c-sand-200))); }
html body :where(.badge--sand-solid)    { background-color: rgb(var(--bg-sand-700, var(--c-sand-700))); color: #FFFFFF; }
html body :where(.badge--sage)          { background-color: rgb(var(--bg-sage-100, var(--c-sage-100))); color: rgb(var(--t-sage-900, var(--c-sage-900))); border-color: rgb(var(--bd-sage-200, var(--c-sage-200))); }
html body :where(.badge--sage-solid)    { background-color: rgb(var(--bg-sage-700, var(--c-sage-700))); color: #FFFFFF; }
html body :where(.badge--success)       { background-color: rgb(var(--bg-success-100, var(--c-success-100))); color: rgb(var(--t-success-900, var(--c-success-900))); border-color: rgb(var(--bd-success-200, var(--c-success-200))); }
html body :where(.badge--success-solid) { background-color: rgb(var(--bg-success-700, var(--c-success-700))); color: #FFFFFF; }
html body :where(.badge--warning)       { background-color: rgb(var(--bg-warning-100, var(--c-warning-100))); color: rgb(var(--t-warning-900, var(--c-warning-900))); border-color: rgb(var(--bd-warning-200, var(--c-warning-200))); }
html body :where(.badge--warning-solid) { background-color: rgb(var(--bg-warning-700, var(--c-warning-700))); color: #FFFFFF; }
html body :where(.badge--danger)        { background-color: rgb(var(--bg-danger-100, var(--c-danger-100))); color: rgb(var(--t-danger-900, var(--c-danger-900))); border-color: rgb(var(--bd-danger-200, var(--c-danger-200))); }
html body :where(.badge--danger-solid)  { background-color: rgb(var(--bg-danger-700, var(--c-danger-700))); color: #FFFFFF; }
html body :where(.badge--info)          { background-color: rgb(var(--bg-info-100, var(--c-info-100))); color: rgb(var(--t-info-900, var(--c-info-900))); border-color: rgb(var(--bd-info-200, var(--c-info-200))); }
html body :where(.badge--info-solid)    { background-color: rgb(var(--bg-info-700, var(--c-info-700))); color: #FFFFFF; }

/* A count rides inside the pill rather than beside it, so a filter row wraps as
 * whole pills. currentColor at low alpha keeps it legible on all 16 roles
 * without needing a per-role rule. */
html body :where(.badge__count) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background-color: var(--badge-count-tint);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1rem;
}
html body :where(.badge--neutral-solid, .badge--primary-solid, .badge--sand-solid,
                 .badge--sage-solid, .badge--success-solid, .badge--warning-solid,
                 .badge--danger-solid, .badge--info-solid) :where(.badge__count) {
    background-color: rgb(255 255 255 / 0.22);
}

html body :where(.badge__dot) {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: currentColor;
    flex: none;
}

/* A pill the user can toggle off (the RO list status filters) keeps its shape
 * and loses its colour, rather than disappearing -- an unselected filter still
 * has to be readable and clickable. */
html body :where(.badge--off) {
    background-color: rgb(var(--surface));
    color: rgb(var(--text-muted));
    border-color: rgb(var(--border));
}

/* ── Alerts / banners ────────────────────────────────────────────────────────
 *
 * One class carries the whole treatment — left rule, tint, and the text and icon
 * colour via `color`, which the icons inherit through currentColor. That last
 * part is the reason this is a component and not three utilities: the RO alerts
 * banner previously repeated its severity conditional five times (border,
 * background, icon, title, body), and that is how an icon ends up a different
 * severity from the border it sits inside.
 */
html body :where(.alert) {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border-left: 4px solid transparent;
    font-size: 0.875rem;
}
html body :where(.alert--info)    { background-color: rgb(var(--bg-info-100, var(--c-info-100))); border-left-color: rgb(var(--bd-info-700, var(--c-info-700))); color: rgb(var(--t-info-900, var(--c-info-900))); }
html body :where(.alert--warning) { background-color: rgb(var(--bg-warning-100, var(--c-warning-100))); border-left-color: rgb(var(--bd-warning-700, var(--c-warning-700))); color: rgb(var(--t-warning-900, var(--c-warning-900))); }
html body :where(.alert--danger)  { background-color: rgb(var(--bg-danger-100, var(--c-danger-100))); border-left-color: rgb(var(--bd-danger-700, var(--c-danger-700))); color: rgb(var(--t-danger-900, var(--c-danger-900))); }
html body :where(.alert--success) { background-color: rgb(var(--bg-success-100, var(--c-success-100))); border-left-color: rgb(var(--bd-success-700, var(--c-success-700))); color: rgb(var(--t-success-900, var(--c-success-900))); }

/* ── Buttons ─────────────────────────────────────────────────────────────────
 *
 * Primary is a spice: exactly one primary button per view, everything else
 * secondary or ghost. Danger is reserved for genuine stop conditions -- it is
 * not the colour for "cancel" in a dialog.
 */
html body :where(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body :where(.btn):focus-visible {
    outline: 2px solid rgb(var(--c-primary-500));
    outline-offset: 2px;
}
html body :where(.btn):disabled,
html body :where(.btn)[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

html body :where(.btn--primary)            { background-color: rgb(var(--bg-primary-500, var(--c-primary-500))); color: rgb(var(--t-primary-50, var(--c-primary-50))); }
html body :where(.btn--primary):hover      { background-color: rgb(var(--bg-primary-700, var(--c-primary-700))); }
html body :where(.btn--secondary)          { background-color:rgb(var(--surface)); color: rgb(var(--t-primary-700, var(--c-primary-700))); border-color: rgb(var(--bd-primary-300, var(--c-primary-300))); }
html body :where(.btn--secondary):hover    { background-color: rgb(var(--bg-primary-50, var(--c-primary-50))); }
html body :where(.btn--ghost)              { background-color:transparent; color:rgb(var(--text-muted)); }
html body :where(.btn--ghost):hover        { background-color:rgb(var(--surface-sunk)); color:rgb(var(--text-body)); }
html body :where(.btn--danger)             { background-color: rgb(var(--bg-danger-700, var(--c-danger-700))); color: rgb(var(--t-danger-50, var(--c-danger-50))); }
html body :where(.btn--danger):hover       { background-color: rgb(var(--bg-danger-800, var(--c-danger-800))); }

html body :where(.btn--sm) { padding:0.25rem 0.625rem; font-size:0.75rem; line-height:1rem; border-radius:0.375rem; }
html body :where(.btn--lg) { padding:0.625rem 1.25rem; font-size:1rem; }

/* ── Cards ───────────────────────────────────────────────────────────────────
 *
 * The teal-headed variant is for trust/security surfaces -- audit trails, 2FA,
 * the history-doesn't-move areas -- where dark reads solid rather than cosy.
 */
html body :where(.card) {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--border));
    border-radius: 0.75rem;
}
html body :where(.card__header) {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgb(var(--border));
    font-weight: 600;
    color: rgb(var(--text-body));
}
html body :where(.card__header--brand) {
    background-color: rgb(var(--brand-ink));
    color: rgb(var(--t-primary-50, var(--c-primary-50)));
    border-bottom-color: transparent;
    border-radius: 0.75rem 0.75rem 0 0;
}
html body :where(.card__body) { padding: 1rem; }

/* ── The theme switch's icons ────────────────────────────────────────────────
 *
 * The navbar control cycles Auto -> Light -> Dark and shows one of three icons.
 * Which one is decided HERE, by CSS on <html data-theme-pref>, rather than by
 * JS or Alpine: theme.js stamps that attribute before first paint, so the right
 * icon is painted on the very first frame. An icon chosen by a framework
 * flickers through all three every time the body is swapped by an hx-boost
 * navigation -- on the one control whose entire subject is how the page looks.
 *
 * The state is qualified ON the `html` type selector, not in front of it. The
 * obvious spelling, `:where(:root[data-theme-pref="dark"]) html body :where(
 * [data-theme-icon="dark"])`, has the right specificity and CANNOT EVER MATCH:
 * `:root` *is* `html`, so it asks for an `html` element that is a descendant of
 * an `html` element. It fails silently -- correct CSS, valid selector, no
 * warning, and every icon simply stays at `display: none`, so the button
 * renders as an empty box the size of an icon.
 *
 * `html:where([data-theme-pref="dark"]) body` is (0,0,2), the same window as
 * every component rule above: `:where()` contributes nothing, so this beats
 * Preflight and still loses to any single utility. Written without the
 * `:where()` wrapper the same rule would be (0,2,2) and would start beating
 * `hidden`. The pair is decided between themselves by source order, which is
 * why the hide rule comes first.
 *
 * The no-attribute case is not a fallback for tidiness: theme.js blocked, or a
 * page that does not include it, would otherwise show no icon at all.
 */
html body :where([data-theme-icon]) { display: none; }
html:where([data-theme-pref="system"]) body :where([data-theme-icon="system"]),
html:where([data-theme-pref="light"]) body :where([data-theme-icon="light"]),
html:where([data-theme-pref="dark"]) body :where([data-theme-icon="dark"]),
html:where(:not([data-theme-pref])) body :where([data-theme-icon="system"]) {
    display: inline-flex;
}

/* ── HTMX interaction states ─────────────────────────────────────────────────
 *
 * An in-flight request must read as calm, never as a failure: danger is
 * reserved for a real non-2xx, applied by the caller after the request settles.
 * Anything that dims itself mid-swap is doing the whole job here.
 */
html body :where(.htmx-request) { opacity: .7; transition: opacity .15s ease; }
html body :where(.htmx-request.htmx-request--quiet) { opacity: 1; }

/* Applied by a caller's hx-on::after-request on a genuine failure only. */
html body :where(.is-error) { border-color: rgb(var(--bd-danger-700, var(--c-danger-700))) !important; }