/* vinDigital — gedeelde design tokens + a11y baseline.
   Wordt geladen vóór de inline <style> van elke pagina,
   zodat pagina-specifieke regels nog kunnen overschrijven. */

:root {
  /* Brand palette — vast en niet-overschrijfbaar */
  --ink:           #1c2028;
  --muted:         #5f6773;
  --line:          #ded8cf;
  --sand:          #f4efe8;
  --cream:         #fbf8f3;
  --white:         #ffffff;

  --accent:        #114b5f; /* deepteal — primair */
  --accent-light:  #1a6b87; /* mid teal — Groei tier, hovers, secundaire accenten */
  --accent-deep:   #0a3344; /* dieper teal — Enterprise tier, voettekst */
  --accent-soft:   #dce7eb; /* zacht teal — pill backgrounds */

  /* Border radius schaal — 4 stappen, niets daartussen */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Section padding schaal */
  --pad-compact:  4rem;
  --pad-default:  5.5rem;
  --pad-hero:     7rem;

  /* Shadows — alleen tinted naar accent, geen pure zwart */
  --shadow-soft:   0 2px 12px rgba(28, 32, 40, 0.05);
  --shadow-hover:  0 8px 28px rgba(17, 75, 95, 0.10);
  --shadow-strong: 0 12px 40px rgba(17, 75, 95, 0.14);

  /* Pricing tier kleuren — teal-scale ipv blue/purple/green */
  --tier-starter:    var(--accent);
  --tier-grow:       var(--accent-light);
  --tier-enterprise: var(--accent-deep);
}

/* Focus-visible — duidelijk maar niet schreeuwerig */
:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a.btn:focus-visible {
  outline-offset: 4px;
}

/* Reduced motion — schakel reveal-animaties en hero-orb uit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Selection — past op het palette */
::selection {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* ── Feature/why icons ── frame de emoji's zodat ze niet meer
   als generieke unsplash-feature-card aanvoelen. Subtiele teal pill,
   gedesatureerd om de schreeuwerige primaire kleuren weg te halen. */
.feature-icon,
.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
  filter: saturate(0.45) hue-rotate(-8deg);
  -webkit-text-fill-color: initial;
}

/* ── Pricing tier headers ── teal-scale ipv blauw/paars/groen.
   Productpages zetten hun tier-header kleuren direct, deze regels
   zorgen dat de oude generieke kleuren nooit meer terugkomen. */
.pricing-tier-starter    { color: var(--tier-starter); }
.pricing-tier-grow       { color: var(--tier-grow); }
.pricing-tier-enterprise { color: var(--tier-enterprise); }

/* ── Hover lift ── unified voor alle cards die hover-translate gebruiken */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover,
  .feature-card:hover,
  .why-card:hover,
  .metric-card:hover {
    transform: none;
  }
}

/* ── Mobile nav fixes — voorkom dat de "Vrijblijvend gesprek" CTA buiten
   het frame valt op product- en help-pagina's. Onder 760px verbergen we
   de tekst-links en houden alleen de primaire CTA over. Onder 480px
   krimpt de CTA zelf naar een compactere tekst via .nav-cta-mobile. */
@media (max-width: 760px) {
  nav .nav-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 0.6rem !important;
  }
  nav .nav-links {
    gap: 0.6rem !important;
  }
  /* Verberg alle nav-links die geen .btn zijn (Producten, Contact, etc.) */
  nav .nav-links a:not(.btn) {
    display: none !important;
  }
  nav .nav-links .btn-primary {
    padding: 0.55rem 0.95rem !important;
    font-size: 0.85rem !important;
  }
}
@media (max-width: 380px) {
  nav .nav-links .btn-primary {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.78rem !important;
  }
  nav .logo {
    height: 28px !important;
  }
}

/* Forceer consistente CTA-kleur — op sommige product-pagina's werd de
   accent overschreven door inline rules. Dit zorgt dat .btn-primary
   altijd het brand-accent gebruikt. */
nav .nav-links .btn-primary,
nav .nav-links .btn-primary:hover,
nav .nav-links .btn-primary:focus-visible {
  background: var(--accent) !important;
  color: #fff !important;
}