/*
    Generated by scripts/build_theme.py from commissioning/design_tokens.py. Do not edit.

    Real CSS rather than Tailwind utilities, deliberately: the CDN build
    styles the page after parse and can be blocked entirely on a site
    connection. Buttons, status chips and focus carry meaning, so they
    must not depend on it.

    Defining only. Nothing here applies until an element opts in.
*/

:root {
    --brand-50: #F7FBF1;
    --brand-100: #EBF5D9;
    --brand-200: #D7EAB6;
    --brand-300: #BDDA8B;
    --brand-400: #9ED145;
    --brand-500: #6FA315;
    --brand-600: #5F8D11;
    --brand-700: #567F10;
    --brand-800: #42620C;
    --brand-900: #334C08;
    --brand-950: #1F2E05;
    --action-primary: #567F10;
    --action-primary-hover: #42620C;
    --action-primary-text: #FFFFFF;
    --action-danger: #B91C1C;
    --action-danger-hover: #991B1B;
    --action-danger-text: #FFFFFF;
    --action-secondary: #FFFFFF;
    --action-secondary-ring: #CBD5E1;
    --action-secondary-text: #1E293B;
    --action-secondary-hover: #F1F5F9;
    --action-disabled: #E2E8F0;
    --action-disabled-text: #94A3B8;
    --surface-page: #F8FAFC;
    --surface-card: #FFFFFF;
    --surface-sidebar: #1E293B;
    --surface-sidebar-raised: #334155;
    --border-default: #E5E7EB;
    --border-strong: #CBD5E1;
    --text-primary: #111827;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-on-dark: #E2E8F0;
    --text-on-dark-muted: #CBD5E1;
    --text-on-sidebar: #94A3B8;
    --text-danger-on-dark: #FCA5A5;
    --focus-ring: #5F8D11;
    --status-done-fill: #EBF5D9;
    --status-done-ring: #5F8D11;
    --status-done-text: #42620C;
    --status-active-fill: #DBEAFE;
    --status-active-ring: #2563EB;
    --status-active-text: #1E3A8A;
    --status-active-outline-fill: #FFFFFF;
    --status-active-outline-ring: #2563EB;
    --status-active-outline-text: #1E3A8A;
    --status-blocked-fill: #FEE2E2;
    --status-blocked-ring: #DC2626;
    --status-blocked-text: #7F1D1D;
    --status-attention-fill: #FEF3C7;
    --status-attention-ring: #D97706;
    --status-attention-text: #78350F;
    --status-idle-fill: #F1F5F9;
    --status-idle-ring: #64748B;
    --status-idle-text: #1E293B;
    --status-void-fill: #F8FAFC;
    --status-void-ring: #CBD5E1;
    --status-void-text: #475569;
    --priority-critical-text: #7F1D1D;
    --priority-high-text: #1E293B;
    --priority-medium-text: #475569;
    --priority-low-text: #64748B;
    --chart-1: #6FA315;
    --chart-2: #2563EB;
    --chart-3: #D97706;
    --chart-4: #7C3AED;
    --chart-5: #0891B2;
    --chart-6: #BE123C;
    --chart-7: #BDDA8B;
    --chart-8: #64748B;
    --focus-width: 2px;
    --focus-offset: 2px;
}

/* ---- focus ---------------------------------------------------------
   One indicator for the whole platform, in two bands: a light halo
   filling the offset gap, then the ring. Two because no single colour
   clears 3:1 across surfaces from #F8FAFC to #334155 and on saturated
   fills -- the best single value sits at 1.20:1 on the primary button,
   an invisible focus ring on the most-pressed control in the app.
   Two bands always leave one edge contrasting: worst case 3.24.

   !important is deliberate. Tailwind's focus:outline-none compiles to
   `outline: 2px solid transparent` at higher specificity than a bare
   :focus-visible rule, and 116 elements in this codebase used it with no
   replacement -- a flat 2.4.7 failure. A focus indicator is the one thing
   a utility class must not be able to take away.

   :focus-visible rather than :focus, so it appears for keyboard users
   and not on every mouse click. */

:focus-visible {
    outline: 2px solid #5F8D11 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
}

/* ---- buttons -------------------------------------------------------
   Four appearances, replacing 37 background colours. A solid fill means
   'this writes to the database'; navigational actions are secondary. */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.btn-primary {
    background-color: #567F10;
    color: #FFFFFF;
}
.btn-primary:hover {
    background-color: #42620C;
}

.btn-secondary {
    background-color: #FFFFFF;
    color: #1E293B;
    border-color: #CBD5E1;
}
.btn-secondary:hover {
    background-color: #F1F5F9;
}

.btn-danger {
    background-color: #B91C1C;
    color: #FFFFFF;
}
.btn-danger:hover {
    background-color: #991B1B;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-disabled,
.btn[aria-disabled='true'] {
    background-color: #E2E8F0;
    color: #94A3B8;
    border-color: transparent;
    cursor: not-allowed;
}

/* ---- status chips --------------------------------------------------
   Fill, ring, icon and label together. The ring is not decoration: a
   fill is 1.05-1.22:1 against a white card and 1.00:1 where a grey chip
   lands on the grey page, so without it the chip is not visible in
   daylight -- and under deuteranopia the done and blocked fills are the
   same colour. */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* A result is a status hue in a different shape, so a completed-but-
   failed test reads as red twice rather than relying on one cue. */
.chip--result {
    border-radius: 0.25rem;
}

.chip--done {
    background-color: #EBF5D9;
    border-color: #5F8D11;
    color: #42620C;
}
.chip--active {
    background-color: #DBEAFE;
    border-color: #2563EB;
    color: #1E3A8A;
}
.chip--active-outline {
    background-color: #FFFFFF;
    border-color: #2563EB;
    color: #1E3A8A;
}
.chip--blocked {
    background-color: #FEE2E2;
    border-color: #DC2626;
    color: #7F1D1D;
}
.chip--attention {
    background-color: #FEF3C7;
    border-color: #D97706;
    color: #78350F;
}
.chip--idle {
    background-color: #F1F5F9;
    border-color: #64748B;
    color: #1E293B;
}
.chip--void {
    background-color: #F8FAFC;
    border-color: #CBD5E1;
    color: #475569;
}

/* fail is the only state on this platform that stops work */
.chip--fail {
    border-width: 2px;
}

/* void reads as struck through: the row happened and then did not */
.chip--void {
    text-decoration: line-through;
}

/* ---- priority ------------------------------------------------------
   Off the status hue scale on purpose. Priority and status sit on the
   same row, and two red chips meaning different things is unreadable.
   Weight and glyph carry it, with one hue at the top of the scale. */

.priority {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.priority-critical {
    color: #7F1D1D;
    font-weight: 700;
}
.priority-high {
    color: #1E293B;
    font-weight: 600;
}
.priority-medium {
    color: #475569;
    font-weight: 500;
}
.priority-low {
    color: #64748B;
    font-weight: 400;
}

/* ---- status on things that are not chips ---------------------------
   A row tinted by its status, and a bar coloured by it, are the same
   mapping in different clothes -- and they were being written out by
   hand alongside the chips, which is how a status ended up one colour
   in a chip and another in the row holding it.

   The surface uses the chip fill, so a tinted row and the chip on it
   agree. The bar uses the ring, because a 2px chip outline and a solid
   bar need the same colour to read as the same state at 1px. */

.status-surface--done {
    background-color: #EBF5D9;
    border-color: #5F8D11;
}
.status-bar--done {
    background-color: #5F8D11;
}
.status-text--done {
    color: #42620C;
}
.status-solid--done {
    background-color: #567F10;
    color: #FFFFFF;
}
.status-surface--active {
    background-color: #DBEAFE;
    border-color: #2563EB;
}
.status-bar--active {
    background-color: #2563EB;
}
.status-text--active {
    color: #1E3A8A;
}
.status-solid--active {
    background-color: #1D4ED8;
    color: #FFFFFF;
}
.status-surface--active-outline {
    background-color: #FFFFFF;
    border-color: #2563EB;
}
.status-bar--active-outline {
    background-color: #2563EB;
}
.status-text--active-outline {
    color: #1E3A8A;
}
.status-solid--active-outline {
    background-color: #1D4ED8;
    color: #FFFFFF;
}
.status-surface--blocked {
    background-color: #FEE2E2;
    border-color: #DC2626;
}
.status-bar--blocked {
    background-color: #DC2626;
}
.status-text--blocked {
    color: #7F1D1D;
}
.status-solid--blocked {
    background-color: #B91C1C;
    color: #FFFFFF;
}
.status-surface--attention {
    background-color: #FEF3C7;
    border-color: #D97706;
}
.status-bar--attention {
    background-color: #D97706;
}
.status-text--attention {
    color: #78350F;
}
.status-solid--attention {
    background-color: #B45309;
    color: #FFFFFF;
}
.status-surface--idle {
    background-color: #F1F5F9;
    border-color: #64748B;
}
.status-bar--idle {
    background-color: #64748B;
}
.status-text--idle {
    color: #1E293B;
}
.status-solid--idle {
    background-color: #475569;
    color: #FFFFFF;
}
.status-surface--void {
    background-color: #F8FAFC;
    border-color: #CBD5E1;
}
.status-bar--void {
    background-color: #CBD5E1;
}
.status-text--void {
    color: #475569;
}
.status-solid--void {
    background-color: #475569;
    color: #FFFFFF;
}

/* ---- surfaces ------------------------------------------------------
   Named for opt-in use. Applying them is a later step. */

.surface-card {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
}
.text-muted-token {
    color: #64748B;
}