/*
 * VapePods AU — Design tokens
 * Clean white + indigo palette. Clash Display headings. Tech grid background.
 */
:root {
  --color-bg:           #f8fafc;
  --color-surface:      #ffffff;
  --color-border:       #e2e8f0;
  --color-ink:          #0f172a;
  --color-muted:        #64748b;
  --color-dark:         #030712;
  --color-dark-2:       #0b0f19;
  --color-accent:       #6366f1;   /* indigo-500 */
  --color-accent-light: #818cf8;   /* indigo-400 */
  --color-accent-hover: #4f46e5;   /* indigo-600 */
  --color-success:      #10b981;
  --color-success-bg:   #d1fae5;
  --color-danger:       #e03c58;

  --font-heading: 'Clash Display', system-ui, sans-serif;
  --font-body:    'Satoshi', system-ui, sans-serif;

  /* Slightly tighter letter-spacing for Clash Display */
  --heading-tracking: -0.03em;
}

/* ── Tech micro-grid background ── */
body {
  background-image: radial-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Headings: tighter tracking ── */
h1, h2, h3, h4, h5, h6 { letter-spacing: var(--heading-tracking); }

/* ── Card hover: indigo border ── */
.vb-card:hover,
.vb-product-card:hover { border-color: #a5b4fc; }

/* ── Buttons: indigo ── */
.vb-btn--primary { box-shadow: 0 4px 20px -4px rgba(99,102,241,0.4); }
.vb-btn--primary:hover { box-shadow: 0 8px 24px -4px rgba(99,102,241,0.5); }

/* ── Hero: dark navy with indigo glow ── */
.vb-hero {
  background: #030712;
}

.vb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 5% 60%, rgba(99,102,241,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 95% 30%, rgba(139,92,246,0.18) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Hero headline accent ── */
.vb-hero__headline span { color: #818cf8; }

/* ── Marquee: white bg ── */
.vb-marquee { background: #ffffff; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

/* ── Header: white with border ── */
#vb-header {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border) !important;
}

#vb-header.is-top {
  background: rgba(255,255,255,0.95) !important;
  border-bottom-color: var(--color-border) !important;
}

/* Nav link colours on light header */
.vb-nav__link { color: #475569 !important; }
.vb-nav__link:hover, .vb-nav__link.current-menu-item { color: var(--color-accent) !important; background: rgba(99,102,241,0.06) !important; }

/* ── Announcement bar: slate-900 ── */
#vb-announcement { background: #0f172a; }

/* ── Selection ── */
::selection { background: #6366f1; color: #fff; }

/* ── FAQ open accent ── */
.vb-faq-item[open] .vb-faq-item__icon { color: #6366f1; }