/* KamagraBestellen.nl — Design tokens v2 "Clinical Trust Blue" (juli 2026)
   Bron van waarheid voor de rebrand. Gespiegeld in de Flatsome child theme. */
/* Fonts worden self-hosted geladen via assets/css/fonts.css (enqueued vóór dit
   bestand). De @import naar fonts.googleapis.com is bewust verwijderd: die
   blokkeerde het renderen én stuurde het IP van elke bezoeker naar Google.
   LET OP: dit bestand is een kopie van ~/projects/kamagrabestellen-ds/tokens.css;
   daar staat de @import nog wél (het style book heeft geen eigen fontmap). */

:root {
  /* Brand */
  --color-brand-blue:        #1554b0;  /* primair — knoppen, links, accenten */
  --color-brand-blue-deep:   #0d3a80;  /* hover / donkere vlakken */
  --color-brand-blue-bright: #2f7ff2;  /* highlights, focus states */
  --color-brand-blue-tint:   #e6effb;  /* zachte achtergrondvlakken */
  --color-brand-navy:        #0b1e33;  /* ink / donkere footer */
  --color-brand-cyan:        #0ba0b2;  /* secundair accent — badges, prijzen-sale */

  /* Neutrals */
  --paper:      #f5f8fc;  /* pagina-achtergrond, koel wit */
  --paper-alt:  #e9f0f8;  /* sectie-afwisseling */
  --surface:    #ffffff;  /* kaarten */
  --line:       #d9e3ef;  /* borders */
  --ink:        #0b1e33;  /* koppen, primaire tekst */
  --ink-soft:   #33475c;  /* lopende tekst */
  --muted:      #5e7189;  /* bijschriften */

  /* Semantic */
  --success:    #188a5a;  /* op voorraad */
  --warning:    #b97324;
  --danger:     #b3382e;

  /* Typografie */
  --font-display: "Manrope", "Segoe UI", sans-serif;   /* koppen: 700/800 */
  --font-sans:    "Inter", -apple-system, sans-serif;  /* body: 400/500/600 */
  --font-mono:    "JetBrains Mono", monospace;         /* specs, DS-labels */

  /* Vorm */
  --radius-card:   14px;
  --radius-button: 10px;
  --radius-input:  10px;

  /* Diepte */
  --shadow-soft: 0 1px 2px rgba(11,30,51,.05), 0 8px 24px rgba(11,30,51,.07);
  --shadow-lift: 0 4px 8px rgba(11,30,51,.07), 0 16px 40px rgba(11,30,51,.12);
  --shadow-focus: 0 0 0 3px rgba(21,84,176,.14);  /* focus-ring op inputs */

  /* Knoppen — gradient + blauwgetinte diepte (v2.1) */
  --grad-button: linear-gradient(180deg, #2a6ac9 0%, #1554b0 55%, #10499e 100%); /* @kind color */
  --grad-button-hover: linear-gradient(180deg, #3273d4 0%, #1a5cbd 55%, #0d3a80 100%); /* @kind color */
  --shadow-button: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(21,84,176,.28), 0 6px 16px rgba(21,84,176,.16);
  --shadow-button-hover: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px rgba(21,84,176,.32), 0 10px 24px rgba(21,84,176,.22);
}

/* Knop-utility — de canonieke CTA (spiegel deze in de site-CSS) */
.kb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border: 0; border-radius: var(--radius-button);
  background: var(--grad-button); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.kb-btn:hover { background: var(--grad-button-hover); transform: translateY(-1px); box-shadow: var(--shadow-button-hover); }
.kb-btn:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(21,84,176,.3); }
.kb-btn:focus-visible { outline: 0; box-shadow: var(--shadow-button), var(--shadow-focus); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-brand-blue);
}