:root {
  /* ===== BRAND COLORS — Exclusive Plumbing & Services =====
     One decisive red is the only chromatic accent (buttons, links, key marks).
     Everything else is black / steel / near-white so the red always means
     "act." Retired hues (tertiary/purple/yellow) are aliased to red or steel
     so any stray reference stays on-brand rather than introducing a new color. */

  /* Primary — Signal Red */
  --color-primary:        #e11d25;
  --color-primary-light:  #fbdcde;
  --color-primary-hover:  #b3141b;
  --color-primary-dark:   #8f1015;
  --color-primary-active: #b3141b;

  /* Accent — the same red (single-accent system) */
  --color-accent:       #e11d25;
  --color-accent-light: #fbdcde;
  --color-accent-dark:  #b3141b;

  /* Secondary — red, used for positive marks (checks/included) */
  --color-secondary:       #e11d25;
  --color-secondary-light: #fbdcde;
  --color-secondary-dark:  #b3141b;

  /* Tertiary — retired → steel neutral */
  --color-tertiary:       #6b7176;
  --color-tertiary-light: #e4e6e9;
  --color-tertiary-dark:  #33383c;

  /* Purple — retired → steel neutral */
  --color-purple:      #6b7176;
  --color-purple-dark: #33383c;

  /* Yellow — retired → red (keeps any stray badge on-brand) */
  --color-yellow:       #e11d25;
  --color-yellow-light: #fbdcde;

  /* ===== NEUTRALS ===== */
  --color-text:          #0b0b0c;   /* deep black */
  --color-text-muted:    #6b7176;   /* steel-muted body text (AA on white) */
  --color-surface-muted: #e4e6e9;
  --color-white:         #ffffff;
  --color-cream:         #f4f5f6;    /* light section background */

  /* Gray scale — cool steel neutrals around the brand steel (#c4c8cc) */
  --color-gray-100: #f4f5f6;
  --color-gray-200: #e4e6e9;
  --color-gray-300: #c4c8cc;
  --color-gray-400: #9aa0a6;
  --color-gray-500: #6b7176;
  --color-gray-600: #33383c;
  --color-gray-700: #0b0b0c;

  /* Dark grounds — deep black for hero / CTA band / footer */
  --color-text-warm:     #0b0b0c;
  --color-text-warm-mid: #17181a;
  --color-espresso:     #0b0b0c;
  --color-espresso-mid: #17181a;

  /* ===== TYPOGRAPHY =====
     EPS pairs Anton (heavy condensed display) for headlines with Inter for
     body/UI. Anton ships a single weight (400) — font-weight on display text
     has no visible effect, which is expected. Both faces are self-hosted
     (see base.css @font-face). */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Font sizes — --text-2xs reserved for designer's mono detail labels;
     --text-xs and up are body-readable (≥12px) per WCAG */
  --text-2xs:  0.625rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* ===== SPACING ===== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;

  /* ===== LAYOUT ===== */
  --container-max: 1280px;
  --container-padding: var(--space-4);

  /* ===== BORDERS ===== */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.12);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* ===== ADMIN SEMANTIC TOKENS ===== */
  --admin-sidebar-width: 220px;
  --admin-sidebar-collapsed: 60px;
  --admin-sidebar-bg: var(--color-text);
  --admin-sidebar-text: var(--color-gray-300);
  --admin-sidebar-active: var(--color-white);
  --admin-sidebar-active-indicator: var(--admin-accent);
  --admin-sidebar-section-label: var(--color-gray-400);

  --admin-body-bg: var(--color-gray-100);
  --admin-text-primary: var(--color-text);
  --admin-text-secondary: var(--color-gray-500);

  --admin-surface: var(--color-white);
  --admin-surface-alt: var(--color-gray-100);
  --admin-surface-hover: rgba(225, 29, 37, 0.05);
  --admin-border: var(--color-gray-200);
  --admin-border-strong: var(--color-gray-300);
  --admin-text-placeholder: var(--color-gray-400);
  --admin-text-on-primary: var(--color-white);
  --admin-text-on-dark: var(--color-white);
  --admin-table-header-bg: var(--color-gray-600);
  --admin-table-header-text: var(--color-white);
  --admin-badge-neutral-bg: var(--color-gray-100);
  --admin-badge-neutral-text: var(--color-gray-600);
  --admin-toggle-bg: var(--color-gray-300);
  --admin-toggle-knob: var(--color-white);
  --admin-shadow-sm: var(--shadow-sm);
  --admin-shadow-md: var(--shadow-md);

  --admin-success-bg: #d1fae5;
  --admin-success-border: #6ee7b7;
  --admin-success-text: #065f46;
  --admin-danger-bg: #fee2e2;
  --admin-danger-border: #fca5a5;
  --admin-danger-text: #991b1b;

  --admin-accent: #e11d25;
  --admin-accent-hover: #b3141b;
  --admin-accent-text: #ffffff;

  --admin-warning-bg: #fef3c7;
  --admin-warning-border: #fcd34d;
  --admin-warning-text: #92400e;

  /* ===== PIPELINE CONSOLE (admin redesign) =====
     Engineered instrument-panel language layered on the admin tokens above.
     See DESIGN.md. Light is the committed default. */

  /* Engineered corners — tighter than the public brand's 0.75–2rem radii */
  --admin-radius:      6px;   /* panels, controls, table container */
  --admin-radius-well: 4px;   /* recessed readout wells */

  /* Instrument chrome + panel materials */
  --admin-panel-chrome: var(--color-text);    /* charcoal header/rail bg */
  --admin-hairline:     var(--color-gray-200); /* table + section rules */
  /* gray-600, not gray-500: silkscreen labels sit on the cream well and the
     gray-100 page bg, where gray-500 falls below WCAG AA (4.5:1). gray-600
     (#4a4241) clears AA on every admin light surface. */
  --admin-silkscreen:   var(--color-gray-600); /* mono panel-label ink */

  /* Status LEDs — filled dot + soft glow. Fixed semantics, signal only.
     These are decorative (never carry text), so the bright values are safe. */
  --admin-led-live:      #e11d25;              /* live / active / primary */
  --admin-led-delivered: #00b880;              /* delivered / success */
  --admin-led-pending:   #f5a623;              /* pending / retrying */
  --admin-led-failed:    #e5484d;              /* failed / dead */
  --admin-led-idle:      var(--color-gray-300);

  /* Recessed readout well — reads as machined into the panel face */
  --admin-well-bg:    var(--color-cream);
  --admin-well-inset: inset 0 1px 3px rgba(0, 0, 0, 0.10),
                      inset 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* Tactile control lift — buttons sit slightly proud, press in on :active */
  --admin-control-lift: 0 1px 0 rgba(0, 0, 0, 0.04),
                        0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ===== ADMIN DARK MODE =====
   Overrides admin semantic tokens when data-theme="dark" is set on <html>.
   The admin layout sets this attribute server-side from the user's saved
   preference (cached in a cookie to avoid flash of wrong theme).

   Only admin-scoped tokens are overridden here — generic tokens like
   --color-white and --color-gray-* are never touched, so the public
   site is unaffected regardless of OS preference or cookie state.

   A @media (prefers-color-scheme: dark) block was intentionally NOT
   added here. Such a block would need to override generic tokens to
   work before JS runs, which leaks dark styles into the public site
   (the bug this refactor fixed). The trade-off is a brief flash of
   light theme on the very first admin visit for OS-dark users, before
   the Stimulus connect() callback sets data-theme. Subsequent visits
   are covered by the cookie. */
[data-theme="dark"] {
  --admin-body-bg: #1a1515;
  --admin-text-primary: #e6e4e4;
  --admin-text-secondary: #9f9493;

  --admin-sidebar-bg: #151010;
  --admin-sidebar-text: #9f9493;
  --admin-sidebar-section-label: #9f9493;

  --admin-surface: #231e1e;
  --admin-surface-alt: #2d2626;
  --admin-surface-hover: rgba(225, 29, 37, 0.12);
  --admin-border: #3d3535;
  --admin-border-strong: #4a4141;
  --admin-text-placeholder: #7a706f;
  --admin-table-header-bg: #332c2c;
  --admin-table-header-text: #e6e4e4;
  --admin-badge-neutral-bg: #2d2626;
  --admin-badge-neutral-text: #9f9493;
  --admin-toggle-bg: #4a4141;
  --admin-toggle-knob: #e6e4e4;
  --admin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --admin-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);

  --admin-success-bg: #064e3b;
  --admin-success-border: #065f46;
  --admin-success-text: #6ee7b7;
  --admin-danger-bg: #7f1d1d;
  --admin-danger-border: #991b1b;
  --admin-danger-text: #fca5a5;

  --admin-accent: #e11d25;
  --admin-accent-hover: #ff3b43;
  --admin-accent-text: #ffffff;

  --admin-warning-bg: #78350f;
  --admin-warning-border: #92400e;
  --admin-warning-text: #fcd34d;

  /* Pipeline Console — panel powered down. LEDs read slightly brighter
     against the darker chrome; wells recess deeper. */
  --admin-panel-chrome: #0f0b0b;
  --admin-hairline:     #3d3535;
  --admin-silkscreen:   #9f9493;

  --admin-led-live:      #ff3b43;
  --admin-led-delivered: #22d29a;
  --admin-led-pending:   #ffb43d;
  --admin-led-failed:    #ff5a5f;
  --admin-led-idle:      #4a4141;

  --admin-well-bg:    #171313;
  --admin-well-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5),
                      inset 0 0 0 1px rgba(255, 255, 255, 0.03);

  --admin-control-lift: 0 1px 0 rgba(255, 255, 255, 0.03),
                        0 1px 2px rgba(0, 0, 0, 0.4);
}