/* Vape Store Template — dark/neon industry look, own layout family. Supports
   the light/dark toggle: a moody graphite light mode + full neon-dark mode,
   both keyed through the shared --color-* semantic tokens so nav/footer/cards
   (shared chrome from Layout.astro/global.css) stay in sync automatically. */
[data-template="vape"] {
  --template-heading-font: 'Inter', sans-serif;
  --template-body-font: 'Inter', sans-serif;
  --template-layout-spacing: 1.5rem;
  --template-image-aspect: 1/1;
  --template-nav-style: uppercase;
  --template-caption-weight: 700;
  --template-hero-height: 90vh;
  --template-card-radius: 2px;
  --template-grid-gap: 1px;
  --template-btn-radius: 2px;
  --template-btn-tracking: 0.1em;
  --template-glow-color: #0e9c86;
  --template-glow-color-2: #8b3fd9;
  --template-glow-on-color: #ffffff;
}

/* Light mode — graphite/warm-grey, not stark white, keeps the moody identity
   while giving dark text enough contrast. */
[data-template="vape"] {
  --color-background: #f2f2f4;
  --color-on-background: #101012;

  --color-surface: #f2f2f4;
  --color-surface-dim: #e8e8ea;
  --color-surface-bright: #ffffff;
  --color-surface-variant: #eaeaec;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f7f7f8;
  --color-surface-container: #eeeeef;
  --color-surface-container-high: #e2e2e4;
  --color-surface-container-highest: #d6d6d9;

  --color-on-surface: #101012;
  --color-on-surface-variant: #55555c;
  --color-inverse-surface: #101012;
  --color-inverse-on-surface: #f5f5f7;

  --color-outline: #b5b5bb;
  --color-outline-variant: #d8d8db;
}

/* Dark mode — the neon-on-black signature look. */
[data-template="vape"][data-theme="dark"] {
  --template-glow-color: #7dfbe0;
  --template-glow-color-2: #b968ff;
  --template-glow-on-color: #050506;

  --color-background: #0a0a0d;
  --color-on-background: #f5f5f7;

  --color-surface: #0a0a0d;
  --color-surface-dim: #050506;
  --color-surface-bright: #17171c;
  --color-surface-variant: #14141a;
  --color-surface-container-lowest: #050506;
  --color-surface-container-low: #101014;
  --color-surface-container: #17171c;
  --color-surface-container-high: #1e1e25;
  --color-surface-container-highest: #26262f;

  --color-on-surface: #f5f5f7;
  --color-on-surface-variant: #a0a0ab;
  --color-inverse-surface: #f5f5f7;
  --color-inverse-on-surface: #0a0a0d;

  --color-outline: #4a4a54;
  --color-outline-variant: #232329;
}

[data-template="vape"] body {
  background: var(--color-surface);
}

[data-template="vape"] .glass-nav {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-bottom: 1px solid var(--color-outline-variant);
}

[data-template="vape"] .product-image-container {
  background: var(--color-surface-container-low);
  padding: 0.5rem;
}

[data-template="vape"] .product-image-container img {
  object-fit: cover;
  transition: transform 0.4s ease;
}

[data-template="vape"] .product-image-container:hover img {
  transform: scale(1.05);
}

[data-template="vape"] footer {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}