:root{
  /* ── Base palette ─────────────────────────────────────────────
     Interstate green — Pantone 342 / FHWA guide-sign standard (#006B3C)
     Highway yellow  — FHWA warning-sign yellow (#FFCD00) */
  --green-sign:        oklch(0.464 0.114 155.4);   /* #006B3C */
  --green-deep:        oklch(0.38 0.093 155.4);   /* nav / sidebar */
  --green-text:        oklch(0.42 0.103 155.4);   /* body copy */
  --green-mid:         oklch(0.54 0.128 155.4);
  --green-light:       oklch(0.64 0.115 155.4);
  --green-pale:        oklch(0.74 0.09 155.4);
  --green-rule:        oklch(0.60 0.06 155.4);   /* sign-panel border */
  --yellow-highway:    oklch(0.88 0.18 89);    /* #FFCD00 */
  --red-traffic:       oklch(0.55 0.22 25);
  --white:             oklch(1 0 0);
  --ink:               oklch(0.15 0 0);
  --gray-panel:        oklch(0.88 0.006 155.4);
  --gray-line:         oklch(0.82 0.02 155.4);
  --gray-text:         oklch(0.52 0.08 155.4);

  /* ── Semantic aliases (names match the product's globals.css) ── */
  --primary:            var(--green-sign);
  --primary-foreground: var(--white);
  --accent:             var(--yellow-highway);
  --accent-foreground:  var(--ink);
  --secondary:            var(--green-deep);
  --secondary-foreground: var(--white);

  --background:         var(--white);
  --foreground:         var(--green-text);
  --card:               var(--white);
  --card-foreground:    var(--green-text);
  --popover:            var(--white);
  --popover-foreground: var(--green-text);

  --muted:            var(--gray-panel);
  --muted-foreground: var(--gray-text);
  --border: var(--gray-line);
  --input:  var(--gray-line);
  --ring:   var(--green-sign);
  --destructive: var(--red-traffic);

  /* ── Progress / chart ramp (green ramp, yellow tail) ── */
  --chart-1: var(--green-sign);
  --chart-2: var(--green-mid);
  --chart-3: var(--green-light);
  --chart-4: var(--green-pale);
  --chart-5: var(--yellow-highway);

  /* ── Sidebar / nav surface ── */
  --sidebar:                    var(--green-deep);
  --sidebar-foreground:         var(--white);
  --sidebar-primary:            var(--green-sign);
  --sidebar-primary-foreground: var(--white);
  --sidebar-accent:             var(--yellow-highway);
  --sidebar-accent-foreground:  var(--ink);
  --sidebar-border:             oklch(0.40 0.09 155.4);
  --sidebar-ring:               var(--green-sign);

  /* ── On-green text tiers (used on sign panels and the app header) ── */
  --on-green-primary:   var(--white);
  --on-green-secondary: oklch(1 0 0 / 80%);
  --on-green-tertiary:  oklch(1 0 0 / 60%);
  --on-green-faint:     oklch(1 0 0 / 30%);
  --on-green-rule:      oklch(1 0 0 / 30%);
}