/* HOHO Sports — Design Tokens
   Consumed by skeleton classes and any component that can't use Tailwind utilities.
   Dark-theme first (zinc scale), matching the site's bg-zinc-950 shell. */

:root {
  /* Brand — electric cyan / chrome-highlight (matches tailwind.config amber/orange remap) */
  --color-brand:          #06B6D4;   /* cyan mid */
  --color-brand-hover:    #22D3EE;   /* bright cyan */
  --color-brand-active:   #0E7490;   /* deep cyan */

  /* Surfaces — dark grey shell (matches tailwind.config zinc remap) */
  --color-bg:             #26262B;   /* zinc-950 (remapped) — page/shell graphite */
  --color-bg-elevated:    #313137;   /* zinc-900 (remapped) — card backgrounds */
  --color-bg-card:        #3D3D44;   /* zinc-800 (remapped) — inset / secondary card */
  --color-border:         #4D4D56;   /* zinc-700 (remapped) */
  --color-border-subtle:  #3D3D44;   /* zinc-800 (remapped) */

  /* Text */
  --color-text-primary:   #F4F4F5;   /* zinc-100 */
  --color-text-muted:     #A1A1AA;   /* zinc-400 */
  --color-text-subtle:    #52525B;   /* zinc-600 */

  /* Semantic */
  --color-success:        #10B981;   /* emerald-500 */
  --color-warning:        #F59E0B;   /* amber-500 */
  --color-error:          #EF4444;   /* red-500 */

  /* Skeleton — use these instead of hardcoded zinc grays */
  --color-skeleton:       var(--color-bg-card);    /* #27272A */
  --color-skeleton-shine: var(--color-border);     /* #3F3F46 */
}

/* Skeleton shimmer — used by .skel-* helpers in base.html */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skel {
  background: linear-gradient(
    90deg,
    var(--color-skeleton)        0%,
    var(--color-skeleton-shine) 50%,
    var(--color-skeleton)       100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 3px;
}

/* Light-theme shimmer variant — for pages with white/slate background (e.g. order list) */
.skel-light {
  background: linear-gradient(
    90deg,
    #e2e8f0  0%,
    #f1f5f9 50%,
    #e2e8f0 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 3px;
}

@keyframes fade-in-fast {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.fade-in-fast { animation: fade-in-fast 0.25s ease-out both; }

/* Cart Drawer — comprehensive text layout fixes */
#cart-drawer-body {
  -webkit-overflow-scrolling: touch;
  writing-mode: horizontal-tb !important;
}

/* Ensure all cart drawer content is horizontal (combat vertical-rl inheritance) */
#cart-drawer,
#cart-drawer-panel,
#cart-drawer-body,
#cart-drawer-body * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* Panel: fixed right-side column, vertical flex stack */
#cart-drawer-panel {
  display: flex !important;
  flex-direction: column !important;
  width: min(480px, 90vw) !important;
}

/* Cart item container — enforce horizontal flex layout */
#cart-drawer-body [class*="flex"][class*="items-start"],
#cart-drawer-body .flex.items-start {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px;
}

/* Text container inside cart item — prevent collapse */
#cart-drawer-body [class*="flex-1"][class*="min-w-0"],
#cart-drawer-body .flex-1.min-w-0 {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden;
}

/* Product name text — horizontal single-line */
#cart-drawer-body p.truncate {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  writing-mode: horizontal-tb !important;
  min-width: 0 !important;
}

/* Badge container — horizontal layout */
#cart-drawer-body [class*="flex"][class*="gap"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  writing-mode: horizontal-tb !important;
}

/* Individual badge — inline, no wrap */
#cart-drawer-body span[class*="px-"][class*="py-"][class*="bg-"] {
  display: inline-flex !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

/* Quantity and price — horizontal */
#cart-drawer-body .font-mono,
#cart-drawer-body .whitespace-nowrap {
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}