/* Tokens: huisstijl van ResidentieVinder (docs/ONTWERPSYSTEEM.md, sectie 1). */
:root {
  --kleur-merk:          #782f40;
  --kleur-merk-hover:    #5e2331;
  --kleur-merk-licht:    #8d3a4e;
  --kleur-merk-actief:   #672736;
  --kleur-merk-donker:   #4a1f2a;
  --kleur-cluster:       #721414;
  --kleur-focus:         rgba(120, 47, 64, 0.45);
  --kleur-rand-pil:      rgba(120, 47, 64, 0.22);

  --kleur-pagina:        #f6f1f3;
  --kleur-paneel:        #f8f8f8;
  --kleur-kaartje:       #ffffff;
  --kleur-pil:           rgba(248, 248, 248, 0.9);
  --kleur-zacht:         #f3ecee;
  --kleur-zacht-roze:    #f6e7ea;
  --kleur-sectie:        #faf6f7;

  /* IMP-135: tekst in twee tinten, één donker en één zacht. De zachte haalt ≥ 6:1 op wit en op alle paginavlakken
     (#654f5a: wit 7,45 · pagina 6,67 · roze 6,22); oude namen wijzen ernaar, zodat er geen derde tint overblijft. */
  --kleur-tekst:         #1f1417;
  --kleur-tekst-zacht:   #654f5a;
  --kleur-tekst-veld:    var(--kleur-tekst);
  --kleur-tekst-waarde:  var(--kleur-tekst);
  --kleur-tekst-sleutel: var(--kleur-tekst-zacht);
  --kleur-tekst-uit:     var(--kleur-tekst-zacht);
  --kleur-tekst-ghost:   var(--kleur-tekst-zacht);

  --kleur-rand-veld:     #d6c7cc;
  --kleur-rand-uit:      #e1d4d9;
  --kleur-rand-knop:     #8e8e93;   /* rand van keuzeknoppen: 3,3:1 op wit (IMP-150: contrast) */
  --kleur-rand-licht:    #dccdd2;   /* IMP-135: 1,53:1 op wit (was #f0e6e9 = 1,2:1, op een fel scherm onzichtbaar) */
  --kleur-greep:         var(--kleur-lijn);   /* IMP-135: één greepkleur voor alle vellen en de advertentie; IMP-152: 3,1:1 op het vel, 3,4:1 op wit (was 1,7:1) */

  --kleur-nieuw-bg:      #fff4d6; --kleur-nieuw-tekst: #7a4d00; --kleur-nieuw-rand: #f0c869;
  --kleur-nieuw-badge:   #e3a008;
  /* IMP-135: één groen en één oranje per betekenis (↓ lager, ↑ hoger); de tekst in de chips is dezelfde tint als
     rondje en label op de kaart. Groen op #e3f3e7 4,67:1, oranje op #fdeee2 5,18:1. */
  --kleur-omlaag-bg:     #e3f3e7; --kleur-omlaag-tekst: var(--kleur-kans-lager); --kleur-omlaag-rand: #b9dfc3;
  --kleur-omhoog-bg:     #fdeee2; --kleur-omhoog-tekst: var(--kleur-kans-hoger); --kleur-omhoog-rand: #f3c9a8;
  --kleur-fout-bg:       #fdeaea; --kleur-fout-tekst:   #7a1f1f; --kleur-fout-rand:   #b83a3a; /* IMP-152: lijn "eraf" ≥ 3,9:1 op pand en grond, wit "−" erop 5,7:1 (was 2,8 op pand) */

  --letter:              var(--ios-letter);   /* IMP-135: één letter, de systeemletter (KERN "Gevoel zoals Apple") */
  --regelhoogte:         1.5;
  --gewicht-normaal:     400;
  --gewicht-half:        600;
  --gewicht-vet:         700;

  --tekst-basis:         17px;
  --tekst-kop:           1.3rem;
  --tekst-kop2:          1.05rem;
  --tekst-invoer:        1rem;
  --tekst-knop:          0.85rem;
  --tekst-pil:           0.82rem;
  --tekst-hint:          0.78rem;
  --tekst-kaartje-titel: 16px;
  --tekst-kaartje-rij:   13.5px;
  --tekst-chip:          12.5px;

  --ruimte-1:            0.35rem;
  --ruimte-2:            0.5rem;
  --ruimte-3:            0.75rem;
  --ruimte-4:            1rem;
  --ruimte-kaartrand:    12px;
  --hoogte-balk:         56px;

  --hoek-klein:          8px;
  --hoek-knop-kaartje:   10px;
  --hoek-middel:         12px;
  --hoek-vel:            16px;
  --hoek-rond:           999px;

  --schaduw-pil:         0 4px 10px rgba(0, 0, 0, 0.12);
  --schaduw-knop:        0 6px 16px rgba(0, 0, 0, 0.18);
  --schaduw-knop-hover:  0 8px 20px rgba(0, 0, 0, 0.18);
  --schaduw-melding:     0 6px 16px rgba(0, 0, 0, 0.16);
  --schaduw-vel:         0 -10px 30px rgba(0, 0, 0, 0.2);
  --schaduw-kaartje:     0 1px 2px rgba(42, 16, 24, 0.06), 0 12px 32px rgba(42, 16, 24, 0.16);
  --schaduw-kaartje-mobiel: 0 2px 6px rgba(42, 16, 24, 0.1), 0 16px 40px rgba(42, 16, 24, 0.28);

  --tijd-vel:            0.3s ease;
  --tijd-kleur:          0.15s ease;
  --tijd-schaduw:        0.2s ease;
  --tijd-druk:           0.1s ease;
  --tijd-draai:          0.18s ease;
  --wacht-laden:         0.25s;
}
@media (max-width: 768px) { :root { --ruimte-kaartrand: 8px; --tekst-pil: 0.78rem; } }
/* Kansen op de kaart (afgeleid, KERN "Kansen"): groen = lager / nu in je budget, oranje = hoger, goud = nieuw.
   IMP-135: oranje = #a8470a, dezelfde tint als het kaartlabel (wit erop 5,88:1; het oude #c2570c haalde net 4,5). */
:root { --kleur-kans-lager: #1f7a3a; --kleur-kans-hoger: #a8470a; --kleur-kans-nieuw: #9a6a00; } /* IMP-152: zelfde goud als het rondje op de kaart (4,7:1; badgegoud was 2,3:1) */


/* ═══ iOS-laag (IMP-051; bron: prive/concepten/apple-en-computer.html). Sinds IMP-135 is `--letter` gelijk aan
   `--ios-letter`: overal de systeemletter. ═══ */
:root {
  --ios-letter: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  /* capsule (balkknop) */
  --capsule-hoogte: 56px;            /* peutertoets: hoofdactie */
  --capsule-hoek: 999px;
  --capsule-tekst: 16px;
  --capsule-gewicht: 600;
  --capsule-padding: 0 12px;
  --capsule-tussen: 6px;
  --capsule-bg: rgba(255, 255, 255, .94);   /* IMP-152: kaarttekst schemerde door de capsule (was .86) */
  --capsule-materiaal: saturate(180%) blur(20px);
  --capsule-tekstkleur: var(--kleur-merk-donker);
  --capsule-gekozen-bg: var(--kleur-zacht-roze);     /* één token voor Plaats, Budget én Filters */
  --capsule-gekozen-rand: rgba(120, 47, 64, .45);
  --capsule-schaduw: 0 1px 2px rgba(31, 20, 23, .08), 0 6px 18px rgba(31, 20, 23, .14);
  /* druk-reactie en veer */
  --druk-schaal: .94;
  --druk-in: 80ms ease-out;
  --veer-terug: 420ms cubic-bezier(.34, 1.56, .64, 1);  /* loslaten: licht doorveren */
  --veer-curve: cubic-bezier(.32, .72, 0, 1);            /* iOS-vel */
  --veer-open: 500ms;
  --veer-dicht: 320ms;
  /* vel */
  --vel-bg: var(--kleur-pagina);
  --vel-hoek: 16px;
  --vel-greep-b: 36px; --vel-greep-h: 5px; --vel-greep-kleur: var(--kleur-greep);
  --vel-dim: rgba(31, 20, 23, .28);
  /* rijen (iOS inset grouped) */
  --rij-hoogte: 56px;
  --rij-tekst: 17px;
  --rij-hoek: 12px;
  --rij-inzet: 16px;
  --rij-lijn: 1.5px solid rgba(60, 60, 67, .14);
  --rij-druk: rgba(120, 47, 64, .08);
  --vink-kleur: var(--kleur-merk);
  /* schakelaar */
  --schakel-b: 51px; --schakel-h: 31px; --schakel-knop: 27px;
  --schakel-aan: var(--kleur-merk); --schakel-uit: rgba(120, 120, 128, .24);
  /* zoekveld */
  --zoekveld-hoogte: 44px; --zoekveld-bg: rgba(118, 118, 128, .12); --zoekveld-hoek: 10px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --druk-in: 1ms; --veer-terug: 1ms; --veer-open: 1ms; --veer-dicht: 1ms; --tijd-vel: 1ms; --tijd-kleur: 1ms; }
}

/* ═══ IMP-059 Rust en symmetrie (ONTWERP-RUST regel 11): één raster, één maat per soort. Deze laag wint van alles
   hierboven; oude namen wijzen naar dezelfde waarden, zodat er nergens losse maten overblijven. ═══ */
:root {
  /* 8-px-raster */
  --stap-1: 8px; --stap-2: 16px; --stap-3: 24px; --stap-4: 32px;
  --ruimte-1: var(--stap-1); --ruimte-2: var(--stap-1); --ruimte-3: var(--stap-2); --ruimte-4: var(--stap-2);
  --ruimte-kaartrand: var(--stap-2);
  /* Eén hoogte voor bediening (knop, capsule, rij, veld); kruimels/blokjes/meldingen in de kruimelzone één kleinere maat.
     IMP-143 (opdrachtgever 18-10: vorm te groot voor de tekst): zichtbaar 44/36 zoals Apple (44 bij 17 px = 2,6 : 1);
     het raakvlak blijft de peutertoets: hoofdacties 56 (--maat-tik, onzichtbaar via ::before), de rest ≥ 44. */
  --maat: 44px;
  --maat-klein: 36px;
  --maat-tik: 56px;
  --hoogte-balk: var(--maat);
  --capsule-hoogte: var(--maat); --rij-hoogte: var(--maat); --zoekveld-hoogte: var(--maat);
  /* Eén ronding voor bediening (capsule), één voor vlakken (vel, kaartje, groep, paneel). */
  --hoek-bediening: 999px;
  --hoek-vlak: 16px;
  --hoek-klein: var(--hoek-vlak); --hoek-knop-kaartje: var(--hoek-vlak); --hoek-middel: var(--hoek-vlak); --hoek-vel: var(--hoek-vlak);
  --hoek-rond: var(--hoek-bediening); --capsule-hoek: var(--hoek-bediening); --zoekveld-hoek: var(--hoek-bediening);
  --vel-hoek: var(--hoek-vlak); --rij-hoek: var(--hoek-vlak);
  /* Drie lettergroottes, één letter. */
  --tekst-s: 14px; --tekst-m: 17px; --tekst-l: 22px;
  --tekst-basis: var(--tekst-m); --tekst-invoer: var(--tekst-m); --tekst-kop2: var(--tekst-m); --tekst-kaartje-titel: var(--tekst-m);
  --tekst-kop: var(--tekst-l);
  --tekst-knop: var(--tekst-s); --tekst-pil: var(--tekst-s); --tekst-hint: var(--tekst-s); --tekst-kaartje-rij: var(--tekst-s); --tekst-chip: var(--tekst-s);
  --capsule-tekst: var(--tekst-m); --rij-tekst: var(--tekst-m);
  /* Balk: vier gelijke capsules, gelijke tussenruimte; op de computer een vaste breedte, gecentreerd. */
  --capsule-tussen: var(--stap-2);           /* IMP-376 (herstel na blinde controle, concept rust-knoppen): 16 px tussen balkknoppen (was 8), tikvlakken ≥ 12 px uit elkaar */
  --capsule-padding: 0 var(--stap-1);
  --rij-inzet: var(--stap-2);
  --capsule-breedte: 112px;                  /* IMP-143: was 128; "€ 300.000" in 17 px past met 8 px binnenruimte */
  --balk-breedte: calc(4 * var(--capsule-breedte) + 5 * var(--stap-1)); /* 488 px = Filters 222 + 16 + Prijswijzigingen 190 + 16 + ♥ 44 (concept IMP-376; was 472 met 8 px ertussen) */
  --paneel-breedte: 360px;                   /* IMP-143: was 448; Apple-paneel 320–375, 8-px-raster */
  --kaartje-breedte: var(--paneel-breedte);
  --vel-breedte: var(--paneel-breedte);      /* IMP-143: één paneelbreedte (was 384) voor Plaats/Budget/Filters op de computer */
}
@media (max-width: 768px) { :root { --ruimte-kaartrand: var(--stap-1); --tekst-pil: var(--tekst-s); --capsule-tekst: var(--tekst-s); --capsule-padding: 0 calc(var(--stap-1) / 2); } } /* vier gelijke capsules van 84 px, binnenruimte 4 px: 14 px past ("€ 300.000", "€ 1 miljoen", "Leiden +1"); Herstel P1 */

/* ═══ IMP-099 Prikkelarm (ONTWERP-RUST): beweging kort en zacht (≤ 250 ms), nergens doorveren; gekozen-stand en
   voorbeeldtekst goed zichtbaar (≥ 3:1 en ≥ 4,5:1). Wint van de iOS-laag hierboven. ═══ */
:root {
  --veer-curve: cubic-bezier(.2, .8, .2, 1);   /* zachte ease-out, geen overshoot */
  --veer-open: 250ms;
  --veer-dicht: 200ms;
  --veer-terug: 180ms var(--veer-curve);       /* loslaten na indrukken: terug zonder doorveren */
  --capsule-gekozen-rand: var(--kleur-merk);   /* rand 7,6:1 op wit (was 2,33:1) */
  --zoekveld-voorbeeld: var(--kleur-tekst-zacht); /* voorbeeldtekst en vergrootglas: ≥ 4,5:1 op het grijze veld (IMP-135: de ene zachte tint) */
  --kleur-focus: var(--kleur-merk);            /* IMP-101: focusring 7,6:1 op wit (was 45 % = 2,3:1); alleen bij :focus-visible */
}
@media (prefers-reduced-motion: reduce) {
  :root { --druk-in: 1ms; --veer-terug: 1ms; --veer-open: 1ms; --veer-dicht: 1ms; --tijd-vel: 1ms; --tijd-kleur: 1ms; }
}

/* ═══ IMP-152 Contrast (ONTWERP-RUST 9: ga niet uit van goede schermen). Eén grijs voor bediening die niet gekozen is
   (greep, rij-pijltje, ring om de schuifduim; zelfde grijs als spoor/streepjes/schakelaar van IMP-127): 3,4:1 op wit,
   3,1:1 op het vel. Rand van een pand te koop in 2D: 4,5:1 op een pand, 5,4:1 op de grond; rustig (verzadiging ≤ 0,12). ═══ */
:root { --kleur-lijn: #8a8a8e; --kleur-pand-koop: #675b5c; }