/* Karga brand layer for the pages that use Tailwind from the CDN.
 *
 * The system is near-black and white with a single warm accent, defined once in
 * the landing page's tokens and mirrored here so the shipper portal and the live
 * map stop looking like a different product (they were emerald, while the landing
 * page and the console were ink-and-amber).
 *
 * Loaded after Tailwind, so these win where they overlap. Everything is expressed
 * with !important because Tailwind's CDN build injects its utilities at runtime
 * and would otherwise win the cascade.
 */
:root {
  --karga-ink: #0a0a0a;
  --karga-accent: #ff6b1a;
  --karga-accent-2: #e2570b;
  --karga-accent-text: #b8420a;
  --karga-line: #e6e6e8;
  --karga-sh-1: 0 1px 2px rgba(16, 17, 20, .05), 0 10px 26px -18px rgba(16, 17, 20, .22);
  --karga-sh-2: 0 2px 5px rgba(16, 17, 20, .06), 0 24px 50px -26px rgba(16, 17, 20, .32);
  --karga-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Elevation, so cards read as lifted rather than outlined — same two-layer
   shadow the landing page uses. */
.card {
  border-color: var(--karga-line) !important;
  box-shadow: var(--karga-sh-1);
}

/* The brand word, where it is set in colour rather than ink. */
.karga-brand { color: var(--karga-accent-text) !important; }

/* One primary action treatment across the product: near-black, lifting on hover. */
.karga-primary {
  background: var(--karga-ink) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -16px rgba(16, 17, 20, .7);
  transition: transform .18s var(--karga-ease), box-shadow .18s var(--karga-ease);
}
.karga-primary:hover { transform: translateY(-1px); box-shadow: var(--karga-sh-2); }

/* The accent, for the one action a page most wants taken. */
.karga-accent {
  background: linear-gradient(180deg, var(--karga-accent) 0%, var(--karga-accent-2) 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -16px rgba(255, 107, 26, .6);
  transition: transform .18s var(--karga-ease), box-shadow .18s var(--karga-ease);
}
.karga-accent:hover { transform: translateY(-1px); box-shadow: 0 20px 40px -16px rgba(255, 107, 26, .75); }

/* A figure worth reading first. */
.karga-num { color: var(--karga-accent-text) !important; }

table { border-collapse: collapse; width: 100%; }
table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #6b7280; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--karga-line);
}
table td { padding: 7px 8px; border-bottom: 1px solid #f3f3f5; }

:focus-visible { outline: 2px solid var(--karga-accent); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .karga-primary, .karga-accent { transition: none !important; }
  .karga-primary:hover, .karga-accent:hover { transform: none !important; }
}