/* ==========================================================================
   Trust Blue Design Tokens
   White canvas, deep trust-blue brand (#0353A4 → #12263A gradient), navy
   text, sky-blue (#B9D6F2) secondary accent — from the reference palette
   (#F5F8FF / #12263A / #0353A4 / #B9D6F2).
   Three deliberately distinct light tiers: white page canvas < pale card
   surface < sky-blue nested surface, so nothing blends together.
   ========================================================================== */
:root {
  /* Backgrounds — three distinct tiers, lightest to most saturated */
  --color-bg-900: #ffffff;
  --color-surface-800: #f5f8ff;
  --color-surface-700: #b9d6f2;
  --color-surface-600: #9fc6ee;
  --color-border-700: #dce9f9;
  --color-border-600: #b9d6f2;

  /* Text */
  --color-text-100: #12263a;
  --color-text-300: #12263a;
  --color-text-500: #52708c;

  /* Brand — trust blue (header/footer band, secondary actions) */
  --color-brand-900: #12263a;
  --color-brand-600: #0353a4;
  --color-brand-400: #2e76b8;
  --color-brand-300: #0353a4;

  /* CTA accent — same trust-blue family as the brand */
  --color-accent-500: #0353a4;
  --color-accent-600: #023e7d;

  /* Coral highlight (sale/hot tags) + semantic */
  --color-highlight: #c9483a;
  --color-success-600: #1e7a4d;
  --color-danger-600: #c23350;

  /* Typography */
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Radius / shadow / motion */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 20px rgba(18, 38, 58, 0.08);
  --shadow-card-hover: 0 18px 45px rgba(18, 38, 58, 0.16);
  --glow-brand: 0 0 0 1px rgba(3, 83, 164, 0.35), 0 10px 34px rgba(3, 83, 164, 0.28);
  --glow-accent: 0 0 0 1px rgba(2, 62, 125, 0.4), 0 10px 34px rgba(2, 62, 125, 0.3);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* Precomputed alpha tints (Tailwind's /NN opacity modifier can't reliably
     apply to an arbitrary var() reference, so these are baked in directly) */
  --tint-search-bg: rgba(245, 248, 255, 0.9);
  --tint-menu-hover: rgba(3, 83, 164, 0.08);
  --tint-accent-soft: rgba(3, 83, 164, 0.08);
  --tint-brand-soft: rgba(185, 214, 242, 0.4);
  --tint-accent-bg: rgba(3, 83, 164, 0.12);
  --tint-accent-border: rgba(3, 83, 164, 0.4);
  --tint-success-bg: rgba(30, 122, 77, 0.12);
  --tint-danger-bg: rgba(194, 51, 80, 0.12);
  --tint-accent-orb: rgba(3, 83, 164, 0.22);
  --tint-brand-orb: rgba(185, 214, 242, 0.35);
}

/* ==========================================================================
   Base surface + typography
   ========================================================================== */
body {
  background-color: var(--color-bg-900);
  color: var(--color-text-300);
  font-family: var(--font-body);
}

:where(h1, h2, h3, h4, h5, h6, .font-display) {
  font-family: var(--font-display);
  color: var(--color-text-100);
}

footer :is(h1, h2, h3, h4, h5, h6, .footer-heading) {
  color: #ffffff !important;
}

/* ==========================================================================
   Bold micro-interactions
   ========================================================================== */
/* :where() keeps this at zero specificity so a Tailwind position utility
   (e.g. `absolute`) combined with `.btn-glow` on the same element always wins,
   regardless of stylesheet load order. */
:where(.btn-glow) {
  position: relative;
}
.btn-glow {
  overflow: hidden;
  transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft);
}
.btn-glow:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-accent);
}
.btn-glow::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-out-soft);
}
.btn-glow:hover::after {
  left: 125%;
}

.card-lift {
  transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s var(--ease-out-soft),
    border-color 0.35s var(--ease-out-soft);
}
.card-lift:hover {
  transform: translateY(-6px);
  border-color: var(--color-brand-400);
}
/* :where() keeps this at zero specificity so a Tailwind `hover:shadow-[...]`
   utility on the same element always wins over this default hover shadow. */
:where(.card-lift:hover) {
  box-shadow: var(--shadow-card-hover);
}

/* Ribbon-style promo tag (product-card HOT/discount/NEW/SALE badge) —
   hangs from the top edge with a downward-pointing notch, like a bookmark. */
.promo-tag {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 2rem;
  padding: 0.3rem 0.4rem 0.7rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  box-shadow: 0 2px 6px rgba(18, 38, 58, 0.22);
}
.promo-tag--danger {
  background: var(--color-danger-600);
}
.promo-tag--success {
  background: var(--color-success-600);
}

/* Arrow/chevron-pointed pill (product-card stock-status badge) — a pill
   with the right edge coming to a point, like a small arrow/price tag. */
.arrow-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.9rem 0.25rem 0.65rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
}
.arrow-badge--success {
  background: var(--color-success-600);
}
.arrow-badge--danger {
  background: var(--color-danger-600);
}
.promo-tag--brand {
  background: var(--color-brand-600);
}

/* Plain rectangular label badge (product-card HOT/NEW/SALE, top-left of image) */
.label-badge {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(18, 38, 58, 0.22);
}
.label-badge--danger {
  background: var(--color-danger-600);
}
.label-badge--success {
  background: var(--color-success-600);
}
.label-badge--brand {
  background: var(--color-brand-600);
}

.nav-underline {
  position: relative;
}
.nav-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-brand-400), var(--color-accent-500));
  transition: width 0.3s var(--ease-out-soft);
}
.nav-underline:hover::after {
  width: 100%;
}

/* Infinite marquee for brand-logo strip */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}

/* Toast notifications */
.toast-item {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.3s var(--ease-out-soft), transform 0.3s var(--ease-out-soft);
}
.toast-item.toast-show {
  opacity: 1;
  transform: translateX(0);
}

/* Animated gradient glow background (hero sections) */
@keyframes gradient-glow-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.gradient-glow-bg {
  background: linear-gradient(120deg, var(--color-brand-900), var(--color-brand-600), var(--color-brand-300), var(--color-brand-900));
  background-size: 300% 300%;
  animation: gradient-glow-shift 12s ease-in-out infinite;
}