/* ============================================================================
   HaulAdz Shared UI — design-system foundation (Phase 60B)
   ----------------------------------------------------------------------------
   Single source of truth for the tokens + base components that today are
   re-declared (and slowly drifting) on every page. Values here are the
   EXISTING dominant brand values extracted from the platform (yellow #FFD020
   used on 63 pages, etc.) — this REFINES the brand, it does not replace it.

   Adoption is incremental and non-breaking: a page adds
     <link rel="stylesheet" href="hauladz-ui.css?v=60b">
   BEFORE its own <style>, then removes its local duplicates over time. Because
   these are the same values the pages already use, linking it changes nothing
   visually until a page opts into the component classes.
   ============================================================================ */

:root {
  /* ── Brand + surface colors (canonical: the >50-page dominant values) ── */
  --hz-yellow:  #FFD020;   /* brand primary */
  --hz-yellow2: #ffc000;   /* hover/pressed */
  --hz-yellow3: rgba(255,208,32,0.06); /* tint fill */
  --hz-white:   #f5f0e8;   /* primary text */
  --hz-bg:      #080808;   /* app background */
  --hz-bg2:     #0f0f0f;   /* card/panel */
  --hz-bg3:     #161616;   /* input/inset */
  --hz-bg4:     #1e1e1e;   /* raised */

  --hz-green:   #4ade80;   /* success / verified / online */
  --hz-red:     #E8272A;   /* danger / error / offline */
  --hz-orange:  #f97316;   /* warning / at-risk */
  --hz-blue:    #3b82f6;   /* info / links */
  --hz-purple:  #a855f7;   /* accent (events/partners) */

  /* Text emphasis — ONE canonical muted scale (was 8 drifting values) */
  --hz-muted:   rgba(245,240,232,0.62); /* secondary text (contrast-safe on --bg2) */
  --hz-muted2:  rgba(245,240,232,0.38); /* tertiary / hints */
  --hz-border:  rgba(255,208,32,0.10);  /* brand hairline */
  --hz-border2: rgba(255,255,255,0.06); /* neutral hairline */

  /* ── Spacing scale (4px base) ── */
  --hz-s1: 4px;  --hz-s2: 8px;  --hz-s3: 12px; --hz-s4: 16px;
  --hz-s5: 24px; --hz-s6: 32px; --hz-s7: 48px; --hz-s8: 64px;

  /* ── Radius / shadow / layout ── */
  --hz-r-sm: 5px; --hz-r-md: 8px; --hz-r-lg: 12px; --hz-r-pill: 999px;
  --hz-shadow: 0 8px 30px rgba(0,0,0,.45);
  --hz-shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --hz-sidebar: 210px;   /* --sb */
  --hz-topbar: 52px;     /* --tb */
  --hz-tap: 44px;        /* WCAG 2.2 min touch target */

  /* ── Type scale ── */
  --hz-fs-xs: .68rem; --hz-fs-sm: .8rem; --hz-fs-md: .92rem;
  --hz-fs-lg: 1.1rem; --hz-fs-xl: 1.4rem; --hz-fs-2xl: 2rem;
  --hz-font: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --hz-font-display: 'Bebas Neue', var(--hz-font);

  /* ── Motion ── */
  --hz-dur: .15s;
  --hz-ease: cubic-bezier(.4,0,.2,1);
}

/* ── Focus: visible, consistent, keyboard-only (a11y baseline for 60G) ── */
.hz-scope :focus-visible,
a.hz-link:focus-visible,
.hz-btn:focus-visible,
.hz-input:focus-visible {
  outline: 2px solid var(--hz-yellow);
  outline-offset: 2px;
  border-radius: var(--hz-r-sm);
}

/* ── Buttons: ONE hierarchy — primary / secondary / danger / ghost ── */
.hz-btn {
  font-family: var(--hz-font);
  font-weight: 700; font-size: var(--hz-fs-sm);
  letter-spacing: .3px;
  min-height: var(--hz-tap);
  padding: 0 var(--hz-s4);
  border-radius: var(--hz-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hz-s2);
  transition: background var(--hz-dur) var(--hz-ease), border-color var(--hz-dur) var(--hz-ease), opacity var(--hz-dur);
  white-space: nowrap;
}
.hz-btn--primary   { background: var(--hz-yellow); color: #000; }
.hz-btn--primary:hover  { background: var(--hz-yellow2); }
.hz-btn--secondary { background: transparent; color: var(--hz-white); border-color: var(--hz-border2); }
.hz-btn--secondary:hover { border-color: var(--hz-yellow); color: var(--hz-yellow); }
.hz-btn--danger    { background: transparent; color: var(--hz-red); border-color: rgba(232,39,42,.4); }
.hz-btn--danger:hover   { background: rgba(232,39,42,.12); }
.hz-btn--ghost     { background: transparent; color: var(--hz-muted); }
.hz-btn--ghost:hover    { color: var(--hz-white); }
.hz-btn[disabled], .hz-btn.is-disabled { opacity: .45; cursor: not-allowed; }

/* ── Inputs ── */
.hz-input {
  font-family: var(--hz-font); font-size: var(--hz-fs-sm);
  background: var(--hz-bg3); color: var(--hz-white);
  border: 1px solid var(--hz-border2); border-radius: var(--hz-r-sm);
  padding: var(--hz-s2) var(--hz-s3); min-height: var(--hz-tap); width: 100%;
}
.hz-input:focus { border-color: var(--hz-yellow); outline: none; }
.hz-input::placeholder { color: var(--hz-muted2); }

/* ── Cards ── */
.hz-card {
  background: var(--hz-bg2); border: 1px solid var(--hz-border2);
  border-radius: var(--hz-r-md); padding: var(--hz-s5);
}

/* ── Status chips — NEVER color alone: each carries a text label + dot ── */
.hz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--hz-fs-xs); font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--hz-r-pill);
  border: 1px solid currentColor;
}
.hz-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hz-chip--ok    { color: var(--hz-green); }
.hz-chip--warn  { color: var(--hz-orange); }
.hz-chip--err   { color: var(--hz-red); }
.hz-chip--info  { color: var(--hz-blue); }
.hz-chip--idle  { color: var(--hz-muted); }

/* ── Empty / loading states — replace bare "—" with an explained state ── */
.hz-empty {
  color: var(--hz-muted); font-size: var(--hz-fs-sm);
  padding: var(--hz-s5); text-align: center; line-height: 1.5;
}
.hz-empty__hint { color: var(--hz-muted2); font-size: var(--hz-fs-xs); margin-top: var(--hz-s1); }
.hz-skeleton {
  background: linear-gradient(90deg, var(--hz-bg3) 25%, var(--hz-bg4) 37%, var(--hz-bg3) 63%);
  background-size: 400% 100%; border-radius: var(--hz-r-sm);
  animation: hz-shimmer 1.4s ease infinite;
}
@keyframes hz-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* ── "Planned, not built yet" — honest replacement for fake coming-soon alerts ── */
.hz-planned {
  opacity: .5; cursor: not-allowed; position: relative;
}
.hz-planned[data-planned]::after {
  content: attr(data-planned);
  font-size: var(--hz-fs-xs); font-weight: 600; color: var(--hz-muted2);
  margin-left: 6px;
}

/* ── Links ── */
.hz-link { color: var(--hz-blue); text-decoration: none; }
.hz-link:hover { text-decoration: underline; }

/* ── Reduced motion (60G) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}