/* Reisritme: de tokens. EEN bron voor de app (index.php), het beheer (admin.php) en de inlogpagina (login.php); elk van die drie laadt dit bestand als eerste stylesheet. Tot 13-10-2026 had elke pagina een eigen kopie van het palet, en die liepen uit elkaar (--ink-3 in het beheer was nog de oude, te lichte waarde; de inlogpagina had een andere terra). Pagina-eigen tokens staan bij die pagina. */ :root { /* surfaces - warm cream */ --bg: #F3EEE5; --surface: #FFFFFF; --surface-2: #FBF7F0; --surface-3: #F0E8DA; --sidebar: #2C2A26; --sidebar-2: #35322D; /* ink */ --ink: #2A2520; --ink-2: #6E655A; --ink-3: #8F8676; /* was #A0978A; verdonkerd 12-08-2026 voor WCAG 3.0 op wit (metatekst) */ --on-dark: #F2EDE3; --on-dark-2: #A39B8C; /* lines */ --line: #E8E0D1; --line-2: #DAD0BD; /* sea - verblijf / primary */ --sea: #2C7A6F; --sea-600: #21645A; --sea-300: #84B6AD; --sea-tint: #E1EEEA; /* terra - reizen */ --terra: #C56A38; --terra-300: #E1A781; --terra-tint: #F7E9DC; /* sun - ideeen / excursies */ --sun: #CE9A2E; --sun-tint: #F6EDD1; --danger: #BE4A3A; --danger-tint: #F6E2DD; --danger-hover: #A93F31; /* afgeleide inkt- en lijnkleuren per accentfamilie (voorheen hardcoded hexen) */ --terra-ink: #9c4f24; /* tekst op terra-tint */ --terra-ink-2: #733612; /* hover-variant */ --terra-line: #eed4bf; /* randen op terra-tint */ --terra-line-2: #e3c3a8; /* donkerder rand / separator */ --terra-fill: #f0d3b9; /* knop-achtergrond in leg-pill */ --terra-fill-hover: #e8c2a0; --sea-line: #cfe5df; /* randen op sea-tint */ --sun-ink: #94701a; /* tekst op sun-tint */ --sun-ink-2: #6f5413; /* chips (donkerder) */ --sun-line: #ecdcad; /* randen op sun-tint */ /* warn - waarschuwingen/acties (amber); ink iets donkerder dan voorheen voor contrast */ --warn-ink: #7e4a0e; --warn-tint: #fcf3e0; --warn-tint-2: #f8ead0; --warn-line: #ecd3a8; /* flight - vlucht-koppelingen (bewust blauw, buiten het aardse palet) */ --flight: #2563eb; --flight-tint: #eaf2fc; --flight-tint-2: #f4f9ff; --flight-line: #cfe0f5; --flight-hover: #dbe8fb; /* reisbelasting-tinten (niveau 2/3; niveau 1 gebruikt sea) */ --load-2-line: #ead49c; --load-2-tint: #fff8e6; --load-3-line: #e7b997; --load-3-tint: #fff1e8; /* tekst op accent-vlakken (primary/danger-knoppen, actieve pills) */ --on-accent: #FFFFFF; /* wereldkaart - grijze landen op --bg, bezocht in sea-tinten, pins in terra */ --map-land: #DDD6C8; /* onbezocht land */ --map-land-line: #C9C0AD; /* landsgrens van onbezochte landen (tan op beige) */ --map-line-on: var(--bg); /* landsgrens van INgekleurde landen: creme, valt weg tegen de zee (geen kust-halo) maar steekt af tussen twee teal-landen */ --map-visited: var(--sea); /* heel land bezocht */ --map-partial: var(--sea-300); /* alleen regio's/pins: lichte tint */ --map-region: var(--sea-600); /* gemarkeerde regio bovenop de partial-tint */ --map-pin: var(--terra); /* pins + km-cirkels */ --map-shared: #6b4fa1; /* "Samen"-kaart: land bezocht door 2+ reisgenoten (buiten het reisgenoot-palet) */ /* HOEKRADIUS - EEN STAP PER HIERARCHIE-NIVEAU. REKENREGEL (concentrisch nesten): binnen = buiten - padding, en dus buiten = binnen + padding. Dan is de visuele marge in de hoek gelijk aan die langs de zijkanten. Is de binnenhoek (bijna) gelijk aan de buitenhoek, dan vechten de twee randen; is hij te klein, dan zwemt het kind in de bocht. De regel geldt waar een kind ECHT in de hoek van zijn ouder ligt (padding kleiner dan de radius). Ligt het midden in een lijst, of is de padding groter dan de radius, dan is er geen hoekcontact en is de stap vrij. Vandaar vier stappen i.p.v. drie: --radius level 1: ELK blok dat direct op de paginaondergrond staat. Dus niet alleen kaarten, panelen, drawer/dialog/modal, tabelwrap, heat-strip en wereldkaart, maar ook de items in het dagprogramma (reisblok, activiteitkaart, toevoeg-rij) en de reispil op de Route-tab. Buren op de ondergrond hebben dus ALTIJD dezelfde hoek. --radius-sm controls van 38px: .rp-btn, .rp-iconbtn, .rp-searchbox en de items in de donkere sidebar. --radius-xs level 2: een rij of vol-breed blokje BINNEN een blok (rij in een paneel/kaart/drawer, kaartkader) en kleine controls van 30-32px op een platte ondergrond (tabelcel, pagina). --radius-xxs level 3: een control BINNEN zo'n rij (knopje in een bijlage-rij, in een plaats-status of in een veld). Daarnaast alleen 999px/50% voor pills en rondjes, en 2-4px micro voor tegeltjes, balkjes en tracks. Geen andere waarden. */ --radius: 20px; --radius-sm: 12px; --radius-xs: 9px; --radius-xxs: 4px; /* = --radius-sm (12) minus de 8px padding van een rij */ /* Maat van de kleine knoppen (.rp-iconbtn.small, .rp-btn.small, .rp-pack-check). BELANGRIJK: op touch wordt alleen deze variabele omgezet (zie het `pointer: coarse`-blok), niet de knop-regels zelf. Anders declareren twee regels met dezelfde specificiteit dezelfde maat en beslist de bestandsvolgorde wie wint - dat leverde eerder knoppen op die uit hun veld hingen. */ --btn-sm: 32px; /* Knopjes die BINNEN een veld of een omlijnde rij staan (zoek-knop in een invoerveld, prullenbak bij een bijlage, ontkoppelen bij een gekoppelde locatie/vlucht) zijn kleiner: er moet nog 8px marge tot de omliggende rand bij passen. Die containers zetten --btn-sm hierop om, zodat een bijlage-rij net zo hoog wordt als een invoerveld. */ --iconbtn-inline: 28px; /* Standaard hoogte van een control: knop, invoerveld, icoon-knop, hamburger. Ook de touch-waarde van --btn-sm leest deze. */ --ctl-h: 38px; /* Actieknoppen in een overlay (drawer-footer, dialog, modal) zijn hoger dan een gewone knop: het zijn volle-breedte tik-doelen op een telefoon, en 38px is daar te krap (Apple HIG mikt op ~44pt). Op touch nog een stap ruimer. */ --overlay-btn-h: 44px; --btn-xs: 30px; /* ghost-knopje: inklap-pijl, kleurkiezer */ --daystep: 24px; /* dag-stepper (op touch groter, zie coarse-blok); 24px is de WCAG-ondergrens voor een klikdoel, was 22px */ --sidebar-w: 256px; --sidebar-w-rail: 64px; /* ingeklapte sidebar (rail) */ --devbar-h: 30px; --statusbar-h: 34px; /* hoogte van de statusbalk onderaan (0 als hij weg is) */ /* dev-banner en snappoint-balk, alleen op localhost */ --sheet-list-max: 46vh; /* scrollende lijst in een sheet/modal */ /* Hoogte van een ENKELREGELIGE rij of veld. Zonder dit verschilt de hoogte per component: een veld wordt bepaald door zijn tekstregel (43,6px), een rij door het knopje erin (28px + padding = 50px). Rijen die meerdere regels tekst kunnen bevatten (plaats-status, vluchtkaart) groeien bewust wel mee. */ --row-h: 48px; /* Hoogte van een .rp-mini-label inclusief zijn ondermarge (regel van 16px + 6px; de marge was 7px tot de oneven maten op 13-10-2026 naar de schaal gingen). Gebruikt om een kolom ZONDER label uit te lijnen met een kolom die er wel een heeft. */ --minilabel-h: 22px; /* Vlakken en lijnen OP de donkere sidebar: wit met alpha, want een opake hex zou het verloop eronder platslaan. Vier stappen i.p.v. negen losse alpha's. */ --dark-1: rgba(255,255,255,.06); /* hover-vlak */ --dark-2: rgba(255,255,255,.09); /* haarlijn, rustvlak */ --dark-3: rgba(255,255,255,.16); /* scrollbalk, rand in rust */ --dark-4: rgba(255,255,255,.25); /* rand bij hover */ /* Overlay achter een drawer/dialog/modal: EEN basiskleur, twee dieptes. De zij-drawer is lichter dan een blokkerende laag die erbovenop komt. */ --scrim: rgba(42,37,32,.45); --scrim-soft: rgba(42,37,32,.32); --scrim-blur: blur(3px); /* Display-typografie: vier stappen + de print-titel, i.p.v. acht losse maten. Body-tekst houdt de vaste schaal (11/12/12.5/13/13.5/14/15/16/17). */ --fs-h1: 26px; --fs-h2: 22px; --fs-h3: 20px; --fs-h4: 18px; --fs-display: 30px; /* Localhost-chrome (dev-banner + snappoint-balk) en de Booking.com-merkkleuren. Beide horen niet in het reispalet, maar wel benoemd i.p.v. losse hexen. */ --dev-amber: #F0AD4E; --dev-ink: #b8b0a2; --dev-dim: #5a5448; --booking: #0a5ad6; --booking-mark: #003580; --booking-hover:#00224f; --shadow-sm: 0 1px 2px rgba(42,37,32,.05), 0 1px 3px rgba(42,37,32,.04); --shadow: 0 2px 8px rgba(42,37,32,.05), 0 14px 30px rgba(42,37,32,.07); --shadow-lg: 0 8px 24px rgba(42,37,32,.10), 0 30px 70px rgba(42,37,32,.16); /* motion - subtiele, functionele animaties (zie de "Beweging"-sectie verderop) */ --ease: cubic-bezier(.2, .7, .2, 1); /* zachte uitloop, matcht de FLIP-reorder */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* iets uitgesprokener voor overlays */ --transition: .16s; /* default voor hover/state-wissels */ --transition-slow: .26s; /* overlays / grotere bewegingen */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font: 'Hanken Grotesk', system-ui, sans-serif; /* ── Schalen (13-10-2026, naar het design system van templateapp) ────────── Nooit een losse maat in een regel: kies de stap uit deze lijsten. Past niets, voeg dan hier een stap toe met een comment, niet een getal in de component. De namen dragen de maat (--sp-12 is 12px), omdat Reisritme zijn eigen fijnere ritme heeft dan de template; de regel is dezelfde, de stappen niet. Oneven maten (3, 5, 7 ... 15px) zijn op 13-10-2026 een stap omlaag naar de schaal gezet (bij gelijke afstand de compactere stap, zoals in templateapp). Wat er nog los staat (26, 30, 36, 44, 46px) ligt 2px of meer naast een stap: geef zo'n maat een eigen token of schrijf hem als som van twee stappen. */ /* Ruimte: padding, marge en gap. */ --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-22: 22px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; /* Tekstmaat voor body en UI; de koppen staan hierboven als --fs-h1..display. Dit is de schaal die al in gebruik was (11/12/12.5/13/13.5/14/15/16/17). */ --fs-10: 10px; /* micro: tellertje in een badge */ --fs-11: 11px; /* uppercase labels, mini-labels */ --fs-12: 12px; /* meta, hints */ --fs-12-5: 12.5px; --fs-13: 13px; /* UI: knoppen, lijstregels */ --fs-13-5: 13.5px; --fs-14: 14px; /* leestekst */ --fs-15: 15px; --fs-16: 16px; /* invoer op touch (anders zoomt iOS in), kaarttitel */ --fs-17: 17px; --fs-page: 24px; /* paginatitel in het beheer */ /* Randdikte: de haarlijn tussen dingen en de nadruk. Accentstrepen van 3 tot 5px zijn vorm, geen rand, en staan bij hun component. */ --lijn: 1px; --lijn-dik: 2px; }