/* VisionSound — donker thema (proefversie), in de stijl van het beheer: antraciet vlakken, lichte tekst en
 * licht afgeronde hoeken. Wordt enkel geladen bij VS_THEMA=donker (of ?thema=donker); zonder dit bestand ziet de
 * site eruit zoals de Sympos-template. Kleuren: Filament "Stone" (zelfde grijstinten als het beheer). */

:root {
  --vs-radius: 12px;
  --vs-radius-small: 8px;
  --vs-dark-bg: #0c0a09;       /* stone-950: achtergrond van het beheer */
  --vs-dark-panel: #1c1917;    /* stone-900: kaarten */
  --vs-dark-panel-2: #292524;  /* stone-800: velden, hover */
  --vs-dark-line: rgba(255, 255, 255, .1);
  --vs-dark-text: #f5f5f4;
  --vs-dark-muted: #a8a29e;
}

body { background-color: var(--vs-dark-bg); }

/* ---------------------------------------------------------------- lichte secties → donker
 * De kleurvariabelen draaien per sectie mee, zodat titels, tekst en kaarten erin automatisch volgen. */
.sec_lineup, .sec_impact, .sec_event, .sec_testimonials, .sec_about,
.vs-section.is-cream, .section_not-found, .bg-subtle {
  background-color: var(--vs-dark-bg);
  color: var(--vs-dark-text);
  --bg-color--bg-subtle: var(--vs-dark-bg);
  --bg-color--bg-low-dark: var(--vs-dark-panel);
  --vs-cream: var(--vs-dark-panel-2);
  --vs-sand: var(--vs-dark-panel);
  --vs-line: var(--vs-dark-line);
  --text-color--text-primary: var(--vs-dark-text);
  --text-color--text-secondary: var(--vs-dark-muted);
  --base--black-72: var(--vs-dark-muted);
}
.sec_pricing { background-color: var(--vs-dark-panel); }
.sec_rundown { background-color: var(--vs-dark-bg); }
.rundown_row_content { background-color: var(--vs-dark-panel); box-shadow: inset 0 0 0 1px var(--vs-dark-line); }
.pricing_ticket_top { background-color: var(--vs-dark-panel-2); }
.dot-xlarge.is-gray { background-color: var(--vs-dark-panel); } /* "ponsgaatjes" in de tickets = kleur van de sectie */
.vs-home-package { background-color: var(--vs-dark-bg); }
.vs-home-package:hover { background-color: var(--vs-dark-panel-2); }

.vs-product-card { color: var(--vs-dark-text); }
/* Inhoudstafel van de algemene voorwaarden: lichte tekst op het donkere vlak, oranje bij hover. */
.vs-terms_toc a { color: var(--vs-dark-text); }
.vs-terms_toc a span { color: var(--vs-dark-muted); }
.vs-terms_toc a:hover, .vs-terms_toc a:hover span { color: var(--base--orange); }
.vs-basket-add.is-icon { border-color: rgba(255, 255, 255, .25); border-radius: var(--vs-radius-small); }
.vs-more.is-on-light:hover { color: var(--vs-dark-text); }
/* Projectkaarten: inhoud binnen het kader, met dezelfde binnenmarge als de andere kaarten. */
.vs-project-card { gap: 1.25rem; background-color: var(--vs-dark-panel); }
.vs-project-card .lineup_card_content { padding: 0 1.5rem 1.5rem; }
.vs-project-card .lineup_card_img { border-radius: 0; } /* de kaart rondt zelf af */
.vs-highlight { color: var(--vs-dark-text); background-color: var(--vs-dark-panel); border-top: 1px solid var(--vs-dark-line); border-bottom: 1px solid var(--vs-dark-line); }
.vs-highlight .text-color-secondary { color: var(--vs-dark-muted); }
.vs-dialog { color: var(--vs-dark-text); background-color: var(--vs-dark-panel); box-shadow: inset 0 0 0 1px var(--vs-dark-line); border-radius: var(--vs-radius); }
.vs-dialog .text-color-secondary { color: var(--vs-dark-muted); }
.vs-dialog_gallery { background-color: var(--vs-dark-bg); }
.vs-project-card_toggle { border-color: rgba(255, 255, 255, .25); border-radius: var(--vs-radius-small); }
.vs-slider_nav .arrow_item { border-color: rgba(255, 255, 255, .25); color: var(--vs-dark-text); border-radius: var(--vs-radius-small); }
.vs-slider_nav .arrow_item:hover { background-color: var(--vs-dark-text); color: var(--vs-dark-bg); }
.vs-slider_nav .arrow_item:disabled { background: transparent; color: var(--vs-dark-text); }
.vs-social-pill { color: var(--vs-dark-text); border-color: rgba(255, 255, 255, .25); border-radius: var(--vs-radius-small); }
.vs-social-pill:hover { background-color: var(--vs-dark-text); color: var(--vs-dark-bg); }
.vs-product-card:hover { box-shadow: inset 0 0 0 1px rgba(224, 52, 0, .6); }

/* Kaarten op een donkere achtergrond: subtiele rand zoals in het beheer. */
.vs-product-card, .impact_card, .event_card, .vs-gallery_item, .vs-terms_toc, .lineup_card, .vs-contact_info {
  box-shadow: inset 0 0 0 1px var(--vs-dark-line);
}

/* ---------------------------------------------------------------- afgeronde hoeken */
.vs-product-card, .vs-product-card_img, .vs-product_main, .vs-product_thumb,
.pricing_ticket_top, .vs-package_img, .vs-home-package, .vs-home-package_img,
.impact_card, .event_card, .lineup_card, .lineup_card_img, .vs-gallery_item, .vs-terms_toc,
.vs-contact_info, .join_ticket_container, .join_ticket_img, .rundown_row_img, .vs-alert {
  border-radius: var(--vs-radius);
  overflow: hidden;
}
.button, .button_left, .button_cover, .vs-chip, .tag-pill, .vs-search input,
.vs-field input, .vs-field textarea, .button_ticket {
  border-radius: var(--vs-radius-small);
}
.button { overflow: hidden; }
.vs-field-check input[type="checkbox"] { border-radius: 4px; }
.sec_cta .img, .vs-hero-img, .vs-hero-slide { border-radius: 0; }

/* ---------------------------------------------------------------- knoppen en filters op donker */
.button.is-ghost-dark .button_left { border-color: rgba(255, 255, 255, .6); }
.button.is-ghost-dark .button_text, .button.is-ghost-dark .button_icon { color: var(--vs-dark-text); }
.button.is-ghost-dark .button_cover { background-color: var(--vs-dark-text); }
.button.is-ghost-dark .button_text.text-color-orange, .button.is-ghost-dark .button_icon.is-bottom { color: var(--vs-dark-bg); }
.vs-chip { border-color: var(--vs-dark-line); color: var(--vs-dark-text); background-color: var(--vs-dark-panel); }
.vs-chip:hover, .vs-chip.is-active { background-color: var(--base--orange); border-color: var(--base--orange); color: #fff; }

/* ---------------------------------------------------------------- formulieren */
.vs-search input, .vs-field input, .vs-field textarea {
  background-color: var(--vs-dark-panel); border-color: var(--vs-dark-line); color: var(--vs-dark-text);
}
.vs-search input::placeholder, .vs-field input::placeholder, .vs-field textarea::placeholder { color: var(--vs-dark-muted); }
.vs-field input:focus, .vs-field textarea:focus, .vs-search input:focus { border-color: var(--base--orange); }
.vs-field input[type="date"] { color-scheme: dark; }
.vs-field-check input[type="checkbox"] { background-color: var(--vs-dark-panel); border-color: rgba(255, 255, 255, .3); }
.vs-alert.is-success { background-color: var(--vs-dark-panel); color: var(--vs-dark-text); }

/* ---------------------------------------------------------------- offertemandje */
.vs-section.is-cream .vs-basket-add:not(.is-added):not(.is-flash) { color: var(--vs-dark-text); }
.vs-basket { background-color: var(--vs-dark-panel); border-color: var(--vs-dark-line); }
.vs-basket_qty { border-color: rgba(255, 255, 255, .2); color-scheme: dark; }
.vs-alert.is-error { background-color: #2a1210; color: #fecaca; }