/* ==========================================================================
   Voetbalkamp.nl — thema.css  ·  "Campagne": grote foto's, veldgroen, één boodschap per blok
   HIER pas je het uiterlijk aan: kleuren, lettertypen, afronding, schaduw, ruimte.
   vk.css (de structuur) gebruikt uitsluitend deze variabelen. Wijzig een waarde,
   verhoog de versie in views/layout/asset-version.php, klaar.

   Foto's van de homepage: views/config/fotos.php.
   Tip: verander één ding tegelijk en bekijk het resultaat op / en /kampen.
   ========================================================================== */

:root {

  /* ---- KLEUREN ---------------------------------------------------------- */
  /* Basis */
  --c-bg: #ffffff;              /* achtergrond van de pagina */
  --c-surface: #ffffff;         /* kaarten, panelen, header */
  --c-surface-2: #f3f6f9;       /* lichte vlakken (velden, tegels, portaal/CMS-achtergrond) */
  --c-alt: #fbf7ef;             /* crème: afwisselende secties en paginakoppen op de site */
  --c-ink: #12212f;             /* tekst */
  --c-ink-2: #5a6a79;           /* gedempte tekst (meta, toelichting) */
  --c-line: #e3e8ee;            /* randen en scheidingslijnen */
  --c-line-strong: #b8c5d3;     /* rand bij hover / actief */

  /* Merk: veldgroen (actie, sport) + donkerblauw (vertrouwen, zakelijk) */
  --c-primary: #0f273d;         /* donkerblauw: zoekknop, footer, nieuwsbriefband */
  --c-primary-ink: #ffffff;
  --c-primary-hover: #1b3b5a;
  --c-accent: #0b6b3a;          /* veldgroen: hoofdknoppen, links, actief menu-item, "Bekijk" */
  --c-accent-hover: #085a30;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #e6f3ea;     /* lichtgroen vlak (iconen, chips, "Uitgelicht"-strook) */
  --c-link: var(--c-accent);
  --c-brand: #1e80ff;           /* logo-blauw (alleen waar het logo het vraagt) */

  /* Sportieve accenten. Spaarzaam gebruiken, dan blijft het zakelijk. */
  --c-green: var(--c-accent);
  --c-green-soft: var(--c-accent-soft);
  --c-yellow: #ffc83d;          /* zon: label in de hero, nieuwsbriefknop, dagkamp */
  --c-yellow-soft: #fff4d6;
  --c-purple: #5b4bd6;          /* slaapkamp (nacht) */
  --c-purple-soft: #ece9fd;

  /* Signaal */
  --c-success: var(--c-accent);
  --c-success-soft: var(--c-accent-soft);
  --c-warning-soft: var(--c-yellow-soft);
  --c-warning: #7a5200;
  --c-danger: #b42318;
  --c-danger-soft: #fdecea;
  --c-star: #f5b301;            /* sterren bij reviews */
  --c-focus: #1e80ff;           /* toetsenbord-focusring */

  /* Grote vlakken */
  --c-topbar-bg: #0f273d;
  --c-topbar-ink: rgba(255, 255, 255, .88);
  --c-hero-bg: #0f273d;         /* achter de hero-foto (zichtbaar tot de foto geladen is) */
  --c-hero-ink: #ffffff;
  --c-band: #0b6b3a;            /* groene boodschapband op de homepage */
  --c-footer-bg: #0f273d;
  --c-footer-ink: #ffffff;
  --c-footer-muted: #aab9c8;

  /* ---- TYPOGRAFIE ------------------------------------------------------- */
  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;   /* koppen: rond en vriendelijk */
  --f-body: "Source Sans 3", system-ui, sans-serif;          /* lopende tekst: helder en zakelijk */
  --fw-heading: 800;            /* dikte van koppen (800 = uitgesproken, 700 = rustiger) */
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 20px;
  --fs-lead: 19px;              /* inleidende tekst onder een kop */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-meta: 14px;              /* regels met icoon op kaarten (plaats, datum, leeftijd) */

  /* ---- VORM ------------------------------------------------------------- */
  --r-sm: 8px;                  /* kleine elementen (badges, logo-kadertje) */
  --r-md: 10px;                 /* velden, tegels */
  --r-lg: 18px;                 /* kaarten, panelen, banden */
  --r-btn: 999px;               /* knoppen op de site: rond = vriendelijk (portaal/CMS blijven hoekig) */
  --r-card: var(--r-lg);
  --r-photo: 24px;              /* grote foto's */
  --card-border: 1px solid var(--c-line);
  --shadow-card: 0 1px 2px rgba(15, 31, 51, .04);                 /* kaarten in rust: héél licht */
  --shadow-hover: 0 12px 28px -14px rgba(15, 31, 51, .35);        /* kaart bij hover */
  --shadow-lift: 0 24px 60px -24px rgba(15, 39, 61, .45);         /* zwevende elementen (zoekbalk, menu) */

  /* ---- RUIMTE ----------------------------------------------------------- */
  --container: 1240px;          /* maximale breedte van de inhoud */
  --gutter: 32px;               /* witruimte links/rechts */
  --gap: 20px;                  /* ruimte tussen kaarten in een raster */
  --section-y: 80px;            /* ruimte boven/onder een sectie */
  --header-h: 76px;             /* hoogte van de witte header */
  --card-pad: 18px;             /* binnenruimte van kaarten */
  --logo-h: 40px;               /* hoogte van het logo-kadertje op kaarten */
  --hero-h: 600px;              /* minimale hoogte van de hero-foto op de homepage */

  /* ---- KAMPENOVERZICHT (/kampen) --------------------------------------- */
  --kampen-cols: 3;             /* kampen naast elkaar op een breed scherm */
  --kampen-filters-w: 264px;    /* breedte van het filterpaneel */
}