/* ============================================================
   Guidant Power — Design Tokens
   Sourced from UX_DESIGN_PROMPT.md §2 (brand & visual system)
   ============================================================ */

:root {
  /* Brand palette */
  --guidant-navy:      #1B325E;
  --guidant-navy-dark: #172C52;
  --guidant-ink:       #0E192F;
  --guidant-yellow:    #F1D934;

  /* Neutral surfaces */
  --surface:           #F5F7FA;
  --card:              #FFFFFF;
  --surface-muted:     #F4F4F4;
  --border:            #EBEBEB;
  --border-strong:     #C2C2C2;
  --tint-blue:         #CBDCE9;

  /* Text */
  --text-primary:      #212121;
  --text-secondary:    #6E6E6E;
  --text-on-dark:      #FFFFFF;

  /* Destructive. Referenced by every "this will remove something" surface — the preview cards'
     warning line, the refused-file borders, an upload's Delete chip — and it was UNDEFINED until
     2026-08-10, which is a quieter failure than it sounds: an undefined var() makes the whole
     declaration invalid, so `background: var(--danger)` fell back to transparent and a chip written
     as white-on-red rendered as white-on-white. The one usage that worked spelled its own fallback
     (`var(--danger, #C62828)`), and that fallback is the value adopted here so nothing shifts. */
  --danger:            #C62828;

  /* Remediation status */
  --color-new:         #1565C0;
  --color-complete:    #2E9E5B;
  --color-in-progress: #F2B705;
  --color-open:        #D32F2F;
  --color-deferred:    #8892A0;
  --color-declined:    #5A6B7B;

  /* Severity — one ordinal ladder of 5, worst (5) to mildest (1). Named by POSITION, not by word:
     the names are applied at render time and may vary by product line (internal/view), so a token
     called --color-critical would go stale the first time a line calls level 5 something else.
     The ramp runs red → slate; every value is text on the matching pale background in
     components.css, so these are chosen for contrast there rather than in isolation. */
  --color-sev-5:       #D32F2F;
  --color-sev-4:       #B03A0B;
  --color-sev-3:       #7A5C00;
  --color-sev-2:       #2E9E5B;
  --color-sev-1:       #5A6B7B;

  /* Scheduling / compliance — 5 states (see docs/domain-model.md).
     The ramp runs neutral → green → amber → red → deep red, and the first two
     swapped on 2026-08-05 with the dashboard's Scheduling Status bars. Green now
     marks the state somebody DID something about (an inspection is booked) and
     grey marks the baseline where there is nothing to do — the dashboard reads as
     "how much of this portfolio is handled", and a wall of green for sites nobody
     has touched answered that question wrongly. One palette for all five states,
     so the bars, the chips and the map pins cannot disagree. */
  --color-current:     #8A94A6;   /* baseline: nothing to do */
  --color-scheduled:   #2E9E5B;   /* an inspection is booked */
  --color-coming-due:  #F2B705;   /* due within the lead window */
  --color-past-due:    #D32F2F;   /* due date passed — grace period */
  --color-delinquent:  #7A1220;   /* grace lapsed, or never inspected at all */

  /* Typography */
  --font-body:  'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* Shell chrome — navy is an accent, not a field. A light top bar over a
     single deep-ink side rail: the rail anchors, the yellow marks the active page. */
  --nav-topbar:      #FFFFFF;   /* white top bar, navy wordmark, yellow logo spark */

  /* Shell dimensions */
  --topbar-height:           56px;
  --sidebar-width:           220px;
  --sidebar-collapsed-width: 56px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.20);

  /* ---- Chip washes and inks --------------------------------------------------------------------
     A status chip is a PAIR: a pale ground and a deep ink that carries its text. Both halves used to
     be written where they were used, so the same wash appeared as a literal in six rules and no file
     listed the palette — which is fine for a machine and useless to the person reviewing this
     product against a brand guide, who does not read CSS and cannot enumerate a colour that exists
     only inside a rule.
     The washes are NOT tints of the status colours computed by formula; they were picked so the ink
     on top clears AA at 12px, which is the size a chip is set at. Changing a wash means re-checking
     its ink, not just the wash.
     Three near-duplicates were folded in on 2026-08-19 — an alert's ground was #FDECEA against a
     chip's #FDE8E8, its success ground #EAF6EE against #E8F5EE, and a banner's green ink #1A6B3C
     against an alert's #1C6B3C. Nobody chose those differences; they were the same colour typed
     twice, one or two points apart. */
  --wash-blue:    #E3F0FB;   /* new */
  --wash-grey:    #EAECED;   /* declined, neutral, retired, severity 1 */
  --wash-slate:   #F0F1F3;   /* deferred */
  --wash-mist:    #EDEFF2;   /* current */
  --wash-red:     #FDE8E8;   /* open, past due, severity 5, removals */
  --wash-crimson: #F3DADE;   /* delinquent — the only wash with visible saturation */
  --wash-orange:  #FDEBE0;   /* severity 4 */
  --wash-amber:   #FEF3CD;   /* in progress, coming due, severity 3 */
  --wash-green:   #E8F5EE;   /* complete, scheduled, severity 2 */
  --wash-warning: #FFF3CD;   /* the FUTURE tag, which is not a status */

  /* The inks. Each is dark enough to carry 12px text on the wash it is paired with; several are
     deliberately NOT the status colour itself, which is chosen for a solid pin and goes muddy as
     small text on a pale ground. */
  --ink-slate:    #5A6B7B;
  --ink-amber:    #7A5C00;
  --ink-steel:    #4A5568;
  --ink-green:    #1C6B3C;
  --ink-red:      #8C1D18;
  --ink-bronze:   #5A3B00;   /* on a SOLID amber pin, not on a wash */
  --ink-warning:  #856404;
  --edge-warning: #F2B705;   /* the dashed edge of the same tag — status amber, borrowed */

  /* ---- Report type badges ----------------------------------------------------------------------
     Four service lines, four hues — and this is the one palette in the product that is NOT drawn
     from the brand. Arc flash reads navy because that is the flagship line; the other three are an
     indigo, a teal and a purple chosen only to be told apart at badge size. A brand review should
     look at these: they are categorical identity, which is exactly the kind of decision a guideline
     usually owns, and nothing here traces to one. */
  --wash-type-af: #E8ECF8;
  --wash-type-ir: #E8F4F8;
  --wash-type-ol: #EEF0F8;
  --wash-type-lb: #F5EEF8;
  --ink-type-ir:  #0E5A6F;
  --ink-type-ol:  #3A3F7A;
  --ink-type-lb:  #5B3A7A;

  /* ---- Non-palette surfaces --------------------------------------------------------------------
     Three colours that are not brand and not status: the sheen that sweeps a loading skeleton, the
     water behind the static US map, and the dark ground a document is read against. Named here so
     the palette file is the whole palette. */
  --skeleton-sheen: #E4E4E4;
  --map-water:      #D6E5F2;
  --doc-canvas:     #4A4A4A;


  /* ---- Chart ramps -----------------------------------------------------------------------------
     The two ORDINAL scales the dashboard draws with, and they are deliberately not the status
     palette above. A chip answers "what state is this in"; a chart band answers "where on a ladder
     does this sit", and the app's status colours cannot say that — the severity chips run red at the
     top and GREEN at the bottom, which on a backlog chart reads as a report on health when every
     band on it is open work. Both ramps therefore start at yellow and have no green anywhere.
     They are emitted from Go (internal/view §AgeBandColor, feature/portfolio §severityColor), which
     writes var(--chart-…) into the segment's style attribute. The values moved here on 2026-08-19:
     they had been hex literals in those functions, which kept them out of every file a designer
     would think to open. The SEPARATION they were written for is intact — different names, a
     different section, and a comment saying why — but the palette is now enumerable in one place. */
  --chart-age-1:  #F5C518;   /* 0–30 days */
  --chart-age-2:  #E8890C;   /* 31–60 */
  --chart-age-3:  #D9480F;   /* 61–90 */
  --chart-age-4:  #A4161A;   /* 90+ */
  --chart-age-ink: #3D2A00;  /* on the two light bands; white carries the other two */

  --chart-sev-1:  #F5D06B;   /* Advisory */
  --chart-sev-2:  #F0A81E;
  --chart-sev-3:  #E2700D;
  --chart-sev-4:  #C63A12;
  --chart-sev-5:  #96121C;   /* Critical */

}
