/*
 * Design Tokens — Junto Media
 */

:root {
  --pink:        #C40058;
  --pink-hover:  #a8004c;   /* iets donkerder pink, voor hover-states op solid-pink buttons */
  --purple:      #631655;
  --dark:    #0a0a0a;
  --anthracite: #1e2226;
  --dark-card: #0d0d0d;
  --dark2:   #111111;
  --dark3:   #161616;
  --border:  #1e1e1e;
  --text:    #f0ede8;
  --muted:   #666666;
  --muted2:  #2a2a2a;
  --muted3:  #333333;
  --muted4:  #444444;
  --muted5:  #555555;
  /* Tekst varianten — gegarandeerd leesbaar op donkere bg */
  --text-muted:    #888888;  /* secundair, comfortabel leesbaar */
  --text-subtle:   #666666;  /* body tekst (AA compliant) */
  --text-faint:    #555555;  /* decoratieve labels, kleine uppercase */
  --text-num:      #444444;  /* sectie nummers (01, 02, 03) */
  --text-dim:      #333333;  /* "dim" variant in headings */
  --ghost-text:    #161616;  /* CTA achtergrondwoord */

  --light-bg:        #f5f2ed;
  --light-bg2:       #edeae5;
  --light-bg3:       #e5e0d8;
  --light-text:      #1a1a1a;
  --light-muted:     #555555;
  --light-border:    #ddd8d2;

  /* Tekst varianten op lichte bg (#f5f2ed) — analoog aan donker */
  --light-text-faint: #777777;  /* decoratieve labels, kleine uppercase */
  --light-text-num:   #888888;  /* sectie nummers (01, 02, 03) */
  --light-text-dim:   #999999;  /* "dim" variant in headings */

  --pad:     80px;
  --max:     1400px;

  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ================================================================
   * DESIGN SYSTEM TOKENS — herhalende patronen
   * Eén centrale plek voor transitions, card-styling en section
   * padding. Cards/buttons/sections moeten deze tokens gebruiken
   * i.p.v. hardcoded waardes — zo blijft het systeem consistent.
   * Zie CLAUDE.md voor wanneer welk pattern.
   * ================================================================ */

  /* Transitions — drie standaardduren */
  --t-fast:    0.2s ease;       /* arrow/icon hover, kleine color shifts */
  --t-base:    0.3s ease;       /* cards, buttons, hover-state */
  --t-slow:    0.4s ease;       /* hover-lines (pink reveal), images */

  /* Lift card pattern — voor klikbare/CTA cards
     (svc-card, case-card, review-card, dwa-spec, sd2-case etc.)
     Statische foto-cards (team-card, vw-scroll__tegel) hebben hun
     eigen patroon — gebruik deze tokens NIET voor die elementen. */
  --card-radius:             8px;
  --card-bg:                 var(--dark-card);
  --card-border:             1px solid var(--border);
  --card-shadow:             0 2px 8px rgba(0, 0, 0, 0.2);
  --card-shadow-hover:       0 10px 28px rgba(0, 0, 0, 0.35);
  --card-lift:               translateY(-4px);
  --card-transition:         background var(--t-base),
                             transform var(--t-base),
                             box-shadow var(--t-base);

  /* Light-mode card varianten (lichte schaduw, witte bg) — gebruikt
     via .homepage-v2.is-hybrid scope overrides. */
  --card-bg-light:           #fff;
  --card-border-light:       1px solid var(--light-border);
  --card-shadow-light:       0 2px 8px rgba(0, 0, 0, 0.04);
  --card-shadow-light-hover: 0 10px 28px rgba(0, 0, 0, 0.08);

  /* Section vertical padding (matches huidige praktijk).
     Default 120px voor standaard secties. Compact 100px voor subdienst-v2
     (SEO landing — meer secties, dus iets minder lucht). Mobile 64px. */
  --section-pad-y:           120px;   /* default */
  --section-pad-y-compact:   100px;   /* subdienst-v2 secties */
  --section-pad-y-sm:        64px;    /* mobile (< 640px) */
}