/*  ============================================================
    Distrilog — Hi-Vis Warehouse design system
    ============================================================
    Central tokens + signature patterns. Loaded by every public
    HTML surface (landing, app, insights) before any local
    styles. Edit tokens here, see changes everywhere.

    Aesthetic mandate:
      Workshop / warehouse / logistics ops. Stencil typography,
      hi-vis safety yellow, diagonal warning stripes, technical-
      drawing rules. Mobile-first; touch targets ≥ 48 px;
      readable in direct sunlight; thumb-zone primary actions.

    DO NOT replace with timid SaaS palettes. The whole point is
    that field crews and ops managers recognize the language at
    a glance — soft pastels and rounded blue gradients are
    explicitly out of scope.
    ============================================================ */

/* ── 1. Fonts ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --ink:           #0a0a0a;
  --ink-soft:      #1a1a1a;
  --steel-1:       #1a1a1a;
  --steel-2:       #2a2a2a;
  --steel-3:       #3a3a3a;
  --paper:         #fafaf7;
  --paper-2:       #f0efe9;
  --chalk:         #8a8a85;          /* muted on dark */
  --concrete:      #4a4a4a;          /* muted on light */
  --hivis:         #ffd60a;          /* THE accent — safety yellow */
  --hivis-deep:    #e6c109;
  --hivis-orange:  #ff6700;          /* secondary — orange for transit/started */
  --good:          #84cc16;          /* lime — concluded */
  --good-dark:     #4d7c0f;
  --bad:           #ef4444;          /* red — not done / error */
  --bad-dark:      #b91c1c;

  /* ── Type scale (mobile-first; clamps to desktop) ───────── */
  --fs-meta:    0.68rem;             /* labels, captions */
  --fs-body:    0.95rem;             /* default reading size on phone */
  --fs-data:    1rem;
  --fs-h3:      clamp(1.15rem, 2.8vw + 0.6rem, 1.55rem);
  --fs-h2:      clamp(1.6rem, 4.4vw + 0.8rem, 2.4rem);
  --fs-h1:      clamp(2.4rem, 8vw + 1rem, 5rem);
  --fs-stencil: clamp(4rem, 18vw + 1rem, 12rem);  /* the giant numerals */

  /* ── Spacing rhythm (8 px grid, double-emphasis on heroes) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Touch targets — Material Design baseline ─────────── */
  --touch-min:   48px;               /* every tap target */
  --touch-large: 56px;               /* primary actions in thumb zone */

  /* ── Surfaces / borders ─────────────────────────────────── */
  --border:      #2e2e2a;
  --border-soft: #1f1f1c;
  --rule:        2px;                /* default rule weight — thicker than usual */

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(.16,.84,.44,1);
  --ease-in:   cubic-bezier(.7,.0,.84,.0);
  --dur-fast:  120ms;
  --dur-mid:   240ms;
  --dur-slow:  600ms;

  /* ── Z-stack ────────────────────────────────────────────── */
  --z-overlay: 100;
  --z-modal:   9000;
  --z-toast:   9500;
}

/* ── 2. Reset / base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
html, body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ── 3. Typographic classes ─────────────────────────────────── */
.hv-display, .hv-stencil {
  font-family: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}
.hv-stencil {
  font-size: var(--fs-stencil);
  letter-spacing: -0.04em;
}
.hv-data, .hv-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on, 'zero' on;
}
.hv-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk);
  font-weight: 500;
}

/* ── 4. Signature: hi-vis diagonal stripe ───────────────────── */
/* Used as section dividers, warning bands, status pills, and as the
   anchor decorative element throughout the app + landing. The pattern
   is 14 px stripe over 14 px gap at 135°. Animation slides the
   gradient infinitely — slow enough to read as ambient. */
.hv-stripes {
  background-image: repeating-linear-gradient(
    135deg,
    var(--hivis) 0 14px,
    var(--ink)   14px 28px
  );
  background-size: 39.6px 39.6px;          /* hypotenuse of 28px × 28px */
}
.hv-stripes-orange {
  background-image: repeating-linear-gradient(
    135deg,
    var(--hivis-orange) 0 14px,
    var(--ink)          14px 28px
  );
}
@keyframes hv-stripe-march {
  from { background-position: 0 0; }
  to   { background-position: 79.2px 0; }  /* 2× stripe-cycle width */
}
.hv-stripes-animated {
  animation: hv-stripe-march 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hv-stripes-animated { animation: none; }
}

/* ── 5. Stencil "stamp" badges ──────────────────────────────── */
/* The inspection-stamp style status indicator: hi-vis-bordered
   rectangle, slight rotation, monospaced label. Used for OS
   status, KPI plates, and section markers. */
.hv-stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  background: transparent;
}
.hv-stamp--pending  { color: var(--chalk); }
.hv-stamp--started  { color: var(--hivis-orange); }
.hv-stamp--complete { color: var(--good); }
.hv-stamp--notdone  { color: var(--bad); }

/* ── 6. Buttons ─────────────────────────────────────────────── */
/* Mobile-first: every button is ≥ 48px tall. Primary actions
   are full-width on phone, auto-width on tablet+. Yellow-fill
   sweep on hover/focus comes in from the left for visual
   forward-direction. */
.hv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-6);
  font-family: 'Archivo', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 0;                  /* no rounded corners — this is industrial */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.hv-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hivis);
  transform: translateX(-101%);
  transition: transform var(--dur-mid) var(--ease-out);
  z-index: 0;
}
.hv-btn > * { position: relative; z-index: 1; }
.hv-btn:hover, .hv-btn:focus-visible {
  color: var(--ink);
  border-color: var(--hivis);
  outline: none;
}
.hv-btn:hover::before, .hv-btn:focus-visible::before {
  transform: translateX(0);
}
.hv-btn:active { transform: translateY(1px); }

.hv-btn--primary {
  background: var(--hivis);
  color: var(--ink);
  border-color: var(--hivis);
  min-height: var(--touch-large);
}
.hv-btn--primary::before { background: var(--paper); }
.hv-btn--primary:hover, .hv-btn--primary:focus-visible {
  color: var(--ink);
  border-color: var(--paper);
}

.hv-btn--ghost {
  border-color: var(--border);
  color: var(--chalk);
}
.hv-btn--ghost::before { background: var(--steel-2); }
.hv-btn--ghost:hover, .hv-btn--ghost:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

.hv-btn--danger {
  border-color: var(--bad);
  color: var(--bad);
}
.hv-btn--danger::before { background: var(--bad); }
.hv-btn--danger:hover, .hv-btn--danger:focus-visible {
  color: var(--paper);
  border-color: var(--bad);
}

/* Full-width by default on mobile; auto on tablet+. */
.hv-btn--block { width: 100%; }
@media (min-width: 768px) {
  .hv-btn--block-mobile-only { width: auto; }
}

/* ── 7. Rule lines ──────────────────────────────────────────── */
.hv-rule {
  height: var(--rule);
  background: var(--paper);
  border: 0;
}
.hv-rule--soft { background: var(--border); }
.hv-rule--hivis { background: var(--hivis); }

/* ── 8. Tap-target helpers ──────────────────────────────────── */
.hv-tap {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── 9. Container ───────────────────────────────────────────── */
.hv-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
@media (min-width: 768px) {
  .hv-container { padding: 0 var(--sp-8); }
}

/* ── 10. Visibility helpers (mobile-first) ──────────────────── */
.hv-only-mobile  { display: block; }
.hv-only-desktop { display: none; }
@media (min-width: 768px) {
  .hv-only-mobile  { display: none; }
  .hv-only-desktop { display: block; }
}

/* ── 11. Focus rings (a11y) ─────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--hivis);
  outline-offset: 2px;
}

/* ── 12. Screen-reader-only text ────────────────────────────── */
.hv-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}