/* Fucuro | THEMA-LAAG -- de ENIGE plek waar kleur woont. * ============================================================================ * Wil je de kleuren van de hele app veranderen? Dan wijzig je ALLEEN dit * bestand. kc.css (kine-app) en patient.css (patient-pagina) dragen sinds * 2026-08-13 geen kleurwaarden meer: hun :root houdt nog uitsluitend de * niet-kleur-schalen (typografie, 8px-grid, phi, radius, timing). * * Drie lagen, van ruw naar betekenis: * 1. MERK-RAMPS de ruwe kleurtrappen (mos, blad, honing, coraal, status). * Themaneutraal: een ramp-stap betekent altijd dezelfde kleur. * 2. SEMANTIEK per surface een rol -> ramp-stap (--kc-* voor de kine-app, * --kc-p-* voor de patient-pagina). ELKE rol draagt zijn * licht- EN donkerwaarde in EEN declaratie via light-dark(). * 3. CONSOLE de altijd-donkere werkvlakken (boom, node-werkblad, bord). * * Waarom light-dark() en geen tweede @media-blok: met light-dark(licht, donker) * staat elke rol precies EEN keer in het bestand. Een tweede blok voor donker * betekent twee plekken die uiteen kunnen lopen -- exact de drift die deze laag * moet uitsluiten. De schakelaar is dan alleen nog color-scheme: * :root -> light dark (volgt het besturingssysteem) * :root[data-thema="licht"] -> light (gebruiker koos licht) * :root[data-thema="donker"] -> dark (gebruiker koos donker) * .kc-thema-donker -> dark (donkere ZONE binnen een licht blad) * Zonder JS blijft de OS-voorkeur werken; kc-thema.js zet alleen het attribuut * voor een expliciete keuze. * * Stijl v4.0 (founder 2026-08-20): espresso en verdigris. Donker is diep bruin, * licht is linnen-beige, en het accent is het koele patina van koper. Anders dan * de monochrome paletten v3.0 (bos-groen) en v3.1 (navy) leunt dit palet op een * hue-CONTRAST: warme grond, koel accent, goud voor de ene actie die telt. * Donker blijft de volwaardige tweelingstaat, niet een afgeleide. De medische * signaalkleuren (pijn, rood, amber) houden hun betekenis en veranderen alleen * in helderheid, nooit in hue. * ==========================================================================*/ /* ── 1. MERK-RAMPS ──────────────────────────────────────────────────────── Themaneutraal. Verander HIER om de hele app van kleurfamilie te wisselen. */ :root { /* Mos: espresso naar linnen (founder 2026-08-20: "donkerbruin met cyaantinten, licht beige met geeltinten"). EEN warme ramp draagt nu beide standen: de donkere kant is espresso, de lichte kant is hetzelfde pigment verdund tot linnen. Dat is de reden dat een warm palet hier goedkoper te onderhouden is dan het navy ervoor: donker en licht zijn niet twee families meer, maar twee uiteinden van dezelfde. Doorgerekend, niet aangenomen: elke trap daalt monotoon in luminantie en de kritieke paren zijn gemeten (leestekst 15:1, gedempte tekst 6.2:1 op licht en 8.0:1 op donker, faint 5.0:1 en 4.7:1). */ --kc-mos-25: #FCF8EF; /* afgeleid */ --kc-mos-50: #F6F0E2; /* afgeleid */ --kc-mos-100: #EDE3D1; /* ANKER */ --kc-mos-200: #D9CBB3; /* afgeleid */ --kc-mos-300: #B6A68C; /* ANKER */ --kc-mos-400: #8C7C64; /* afgeleid */ --kc-mos-500: #74644F; /* afgeleid */ --kc-mos-600: #655645; /* ANKER */ --kc-mos-700: #463B2E; /* afgeleid */ --kc-mos-800: #372E24; /* ANKER */ --kc-mos-850: #2C241C; /* afgeleid */ --kc-mos-900: #271F19; /* ANKER */ --kc-mos-950: #1C1712; /* ANKER */ /* Trede ONDER het diepste anker (founder 2026-08-14: "mag echt nog veel donkerder"). De pagina ligt hieronder, de kaart op het anker erboven, zodat het dieper wordt zonder dat de diepte tussen pagina en kaart verdwijnt. Bewust GEEN zuiver zwart: een grond zonder hue heeft geen karakter, en dat is precies wat een neon-op-zwart palet goedkoop maakt. */ --kc-mos-975: #12100C; /* afgeleid, dieper dan het palet */ /* Blad: het accent, verdigris (het patina op koper). Anders dan de monochrome paletten hiervoor onderscheidt het zich WEL op hue: koel tegen een warme grond. Bewust ontzadigd richting petrol en niet richting cyaan -- een echte cyaan op bruin leest als beeldscherm, niet als kliniek. Op licht een diep vlak (500/600) met lichte tekst, op donker een zacht aqua (300) met donkere tekst. */ --kc-blad-100: #D9F1EE; --kc-blad-200: #AEE3DF; --kc-blad-300: #78CFC9; --kc-blad-400: #3FA7A1; --kc-blad-500: #14706B; --kc-blad-600: #0F5A56; --kc-blad-700: #0A4340; --kc-blad-800: #062E2C; /* Honing: oker en boter, voor de belangrijkste CTA (kine-app). Hier woont het geel uit de founder-opdracht -- in de CTA en in de grondtoon, NIET in het accent: geel op beige is licht-op-licht en haalt de leesbaarheidsdrempel nooit, dus een gele knop zou niet meer als knop lezen. */ --kc-honing-200: #F7E5AC; --kc-honing-300: #EACE7C; --kc-honing-500: #A67C10; --kc-honing-600: #87630A; /* Coraal: aandacht-CTA op de patient-pagina. Terracotta, het complement van verdigris, dus het botst niet met het accent en het hoort wel bij de grond. */ --kc-coraal-200: #F7CDBB; --kc-coraal-300: #EFA98D; --kc-coraal-400: #E08262; --kc-coraal-500: #C25A38; --kc-coraal-600: #A14526; /* Status-ramps. Bewust BUITEN de bladfamilie: "gezond/geslaagd" mag nooit samenvallen met het merkaccent. */ /* Succes-groen, bewust naar BLAD-groen geduwd en van teal weg: het accent is nu zelf blauwgroen, dus een teal 'geslaagd' zou het merk herhalen in plaats van een uitkomst te melden. */ --kc-succes-300: #8FD08A; --kc-succes-600: #3D7F3A; --kc-rood-300: #F0938A; --kc-rood-500: #C93B2C; --kc-rood-600: #A83828; /* Amber leunt in een warm palet onvermijdelijk tegen de oker-CTA aan. Daarom twee scheidingen die geen hue nodig hebben: amber staat roeriger/oranjer dan honing, en de ROLLEN raken elkaar niet -- de CTA bestaat alleen als gevuld vlak, warn alleen als tekst, rand of chip. */ --kc-amber-300: #F0B36A; --kc-amber-700: #96570D; /* Pijn/aangedaan lichaamsdeel: medische markering, eigen ramp zodat een merk-wissel de klinische leesbaarheid nooit meesleept. */ --kc-pijn-licht: #E5484D; --kc-pijn-licht-strong: #C2362F; --kc-pijn-donker: #FF8A8E; --kc-pijn-donker-strong: #FFA9AC; } /* ── 2. DE SCHAKELAAR ───────────────────────────────────────────────────── Alleen color-scheme; alle waarden staan al in de light-dark()-paren. */ :root { color-scheme: light dark; } :root[data-thema="licht"] { color-scheme: light; } :root[data-thema="donker"] { color-scheme: dark; } /* Zone-schakelaars: een donker (of licht) eiland binnen een blad dat het tegenovergestelde thema draagt. light-dark() resolvet PER ELEMENT, dus elk token binnen de zone kantelt mee zonder een tweede palet. */ .kc-thema-donker { color-scheme: dark; } .kc-thema-licht { color-scheme: light; } /* ── 3. SEMANTIEK | KINE-APP (--kc-*) ───────────────────────────────────── Licht = klinisch rustig op linnen. Donker = espresso met glasvlakken. */ :root { --kc-bg: light-dark(var(--kc-mos-50), var(--kc-mos-975)); --kc-surface: light-dark(#FFFFFF, var(--kc-mos-950)); --kc-surface-2: light-dark(var(--kc-mos-100), var(--kc-mos-900)); --kc-ink: light-dark(var(--kc-mos-950), var(--kc-mos-100)); --kc-ink-muted: light-dark(var(--kc-mos-600), var(--kc-mos-300)); --kc-ink-faint: light-dark(var(--kc-mos-500), var(--kc-mos-400)); --kc-accent: light-dark(var(--kc-blad-500), var(--kc-blad-300)); --kc-accent-strong: light-dark(var(--kc-blad-700), var(--kc-blad-100)); --kc-accent-soft: light-dark(rgba(20, 112, 107, 0.10), rgba(120, 207, 201, 0.16)); /* Linktekst: aparte rol, want een accentVLAK mag lichter zijn dan accentTEKST. Op licht leest --kc-accent-strong (7:1 op wit); op donker is het accent zelf al licht-op-donker. */ --kc-link: light-dark(var(--kc-blad-600), var(--kc-blad-300)); /* Tekst op een gevuld vlak. Sinds het founder-palet (2026-08-14) zijn dit TWEE rollen, want het accentvlak kantelt mee en het CTA-vlak niet: accent op licht = diep blauwgroen (donker vlak) -> LICHTE tekst op donker = sage (licht vlak) -> DONKERE tekst CTA goud, in beide standen licht -> altijd donkere tekst Een gedeelde rol zou in het lichte thema donkere tekst op een donker vlak zetten: 1.98:1, onleesbaar. Gemeten waarden in het espresso-palet (2026-08-20): 4.99:1 en 9.80:1 voor het accent, 4.67:1 en 11.53:1 voor de CTA. */ --kc-on-accent: light-dark(var(--kc-blad-100), var(--kc-mos-950)); --kc-on-fill: var(--kc-mos-950); --kc-cta: light-dark(var(--kc-honing-500), var(--kc-honing-300)); --kc-cta-strong: light-dark(var(--kc-honing-600), var(--kc-honing-200)); --kc-cta-soft: light-dark(rgba(166, 124, 16, 0.14), rgba(234, 206, 124, 0.16)); --kc-line: light-dark(rgba(28, 23, 18, 0.10), rgba(237, 227, 209, 0.10)); --kc-border: light-dark(rgba(28, 23, 18, 0.16), rgba(237, 227, 209, 0.18)); --kc-warn: light-dark(var(--kc-amber-700), var(--kc-amber-300)); --kc-warn-bg: light-dark(rgba(150, 87, 13, 0.12), rgba(240, 179, 106, 0.14)); --kc-danger: light-dark(var(--kc-rood-600), var(--kc-rood-300)); --kc-danger-bg: light-dark(rgba(168, 56, 40, 0.10), rgba(240, 147, 138, 0.15)); --kc-success: light-dark(var(--kc-succes-600), var(--kc-succes-300)); --kc-success-bg: light-dark(rgba(61, 127, 58, 0.12), rgba(143, 208, 138, 0.15)); --kc-pijn: light-dark(var(--kc-pijn-licht), var(--kc-pijn-donker)); --kc-pijn-strong: light-dark(var(--kc-pijn-licht-strong), var(--kc-pijn-donker-strong)); /* Diepte. box-shadow is geen , dus light-dark() zit in de KLEUR en de geometrie blijft gedeeld. */ --kc-schaduw-1: light-dark(rgba(28, 23, 18, 0.10), rgba(0, 0, 0, 0.46)); --kc-schaduw-2: light-dark(rgba(28, 23, 18, 0.16), rgba(0, 0, 0, 0.58)); --kc-shadow: 0 1px 3px var(--kc-schaduw-1); --kc-shadow-lg: 0 16px 48px var(--kc-schaduw-2); --kc-glas-glans: light-dark(rgba(28, 23, 18, 0.04), rgba(237, 227, 209, 0.06)); /* Aurora-gloed. Eigen rollen, want de blobs blenden met 'screen' en dat maakt de KLEUR van de gloed de intensiteit ervan. Op licht dempt de aurora zichzelf (een donkere kleur screen't nauwelijks op wit); op donker deed hij het omgekeerde: hij was op --kc-accent gebouwd, en dat is in het donkere thema juist de LICHTSTE kleur, dus hij tilde de bijna-zwarte pagina weer op. Nu hangt de gloed op donker aan diepe mos-treden: zichtbaar als diepte, niet meer als waas. Wil je de gloed sterker of zwakker: deze twee rollen. */ --kc-aurora-kern: light-dark(var(--kc-accent-strong), var(--kc-mos-700)); --kc-aurora-rand: light-dark(var(--kc-accent), var(--kc-mos-800)); --kc-aurora-goud: light-dark(var(--kc-cta-strong), #3B2E14); --kc-aurora-goud-2: light-dark(var(--kc-cta), #2B2110); --kc-scrollthumb: color-mix(in srgb, var(--kc-ink) 20%, transparent); --kc-scrollthumb-hover: color-mix(in srgb, var(--kc-ink) 38%, transparent); } /* ── 4. SEMANTIEK | PATIENT-PAGINA (--kc-p-*) ───────────────────────────── Zelfde familie, eigen temperatuur: warmer wit, meer lucht, groter contrast. De surfaces blijven gescheiden (DESIGN_SYSTEM.md); ze delen alleen de ramp. */ :root { --kc-p-bg: light-dark(var(--kc-mos-25), var(--kc-mos-975)); --kc-p-surface: light-dark(#FFFFFF, var(--kc-mos-950)); --kc-p-ink: light-dark(var(--kc-mos-950), var(--kc-mos-100)); --kc-p-ink-muted: light-dark(var(--kc-mos-600), var(--kc-mos-300)); --kc-p-accent: light-dark(var(--kc-blad-600), var(--kc-blad-300)); --kc-p-accent-strong: light-dark(var(--kc-blad-700), var(--kc-blad-100)); --kc-p-accent-soft: light-dark(var(--kc-mos-100), rgba(120, 207, 201, 0.15)); --kc-p-line: light-dark(#E4DAC6, rgba(237, 227, 209, 0.13)); --kc-p-warn: light-dark(var(--kc-amber-700), var(--kc-amber-300)); --kc-p-warn-bg: light-dark(#FAF2DF, rgba(240, 179, 106, 0.13)); --kc-p-cta: light-dark(var(--kc-coraal-500), var(--kc-coraal-300)); --kc-p-cta-strong: light-dark(var(--kc-coraal-600), var(--kc-coraal-200)); --kc-p-cta-soft: light-dark(#FBE9E0, rgba(239, 169, 141, 0.16)); /* Spierkaart: het silhouet moet op ELKE achtergrond als lichaam lezen, dus zand op licht en een gedempte grond-tint op donker. Actief blijft rood. */ --kc-p-muscle: light-dark(#DDD5C4, #3E332A); --kc-p-muscle-passief: light-dark(#B3A788, #6B5A48); --kc-p-muscle-actief: light-dark(#C84B3C, #E4695A); --kc-p-ster: light-dark(#D9A441, var(--kc-amber-300)); } /* ── 5. CONSOLE-BASIS ───────────────────────────────────────────────────── De boom, het node-werkblad en het bord zijn ALTIJD donker, ook in het lichte thema. Die vlakken leidden hun donkerte vroeger af uit --kc-ink; dat brak zodra --kc-ink in het donkere thema licht werd (donker uit licht mixen geeft licht). Vandaar een eigen, thema-STABIELE basis: wat altijd donker hoort te zijn, hangt niet aan een token dat kantelt. */ :root { /* Stabiel betekent NIET-KANTELEND, niet onveranderlijk (founder 2026-08-20: "ik wil de kleuren meer in het thema, deze wijken teveel af"). Deze vier stonden als losse hex naast het palet, dus een founder die op /admin/thema een groen palet zette hield een BLAUWE console: de boom, het bord en de kader-pop-up volgden de ankers niet. Dat is precies de tweede plek waar kleur woonde die deze laag hoort te voorkomen. Ze hangen nu aan de instelbare ankers uit dezelfde donkere kant van het palet. Die kantelen NIET mee met licht/donker (het zijn vaste schaalwaarden, geen light-dark()-rollen), dus de reden waarom deze rollen stabiel moeten zijn blijft intact; alleen de tweede kleurbron verdwijnt. */ --kc-console-basis: var(--kc-mos-950); /* wat ALTIJD donker is (vlak, veld, rand) */ --kc-console-ink: var(--kc-mos-100); /* wat ALTIJD licht is (tekst, hairline erop) */ /* Helder-op-donker DNA voor de console-accenten (de --n-*-tokens in kc.css mixen hiernaartoe): het anker een trede naar wit, want op een bijna-zwart vlak leest de kale accentkleur te dof. EEN mix-percentage voor beide, zodat de verhouding een regel is en geen met de hand gekozen tint. */ --kc-console-blad: color-mix(in srgb, var(--kc-blad-300) 78%, #fff); --kc-console-goud: color-mix(in srgb, var(--kc-honing-300) 78%, #fff); } /* ── 5b. KANAAL-MERKKLEUREN ─────────────────────────────────────────────── WhatsApp, e-mail en SMS dragen hun eigen herkenningskleur. Die hoort bij het kanaal, niet bij ons thema, en blijft dus in beide standen gelijk -- maar hij staat hier, want ook een vreemde merkkleur is een kleur en die horen op EEN plek te leven. */ :root { --kc-kanaal-whatsapp: #25D366; --kc-kanaal-email: #2D7FF9; --kc-kanaal-sms: #E8833A; } /* ── 6. THEMA-KNOP ──────────────────────────────────────────────────────── Een gedeelde component: identiek op beide surfaces, dus hier en niet twee keer per surface-CSS. Leunt op eigen chrome-rollen zodat hij nergens een surface-token hoeft te lenen. */ :root { --kc-tk-ink: light-dark(var(--kc-mos-700), var(--kc-mos-200)); --kc-tk-bg: light-dark(rgba(255, 255, 255, 0.72), rgba(237, 227, 209, 0.07)); --kc-tk-lijn: light-dark(rgba(28, 23, 18, 0.14), rgba(237, 227, 209, 0.16)); } .kc-themaknop { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 1px solid var(--kc-tk-lijn); border-radius: 999px; background: var(--kc-tk-bg); color: var(--kc-tk-ink); cursor: pointer; -webkit-appearance: none; appearance: none; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } .kc-themaknop:hover { color: var(--kc-blad-500); border-color: var(--kc-blad-400); } .kc-themaknop:focus-visible { outline: 2px solid var(--kc-blad-400); outline-offset: 2px; } .kc-themaknop svg { width: 18px; height: 18px; display: block; } /* Zon in licht, maan in donker: de knop toont de HUIDIGE stand, het label (aria + title) vertelt waar de klik heen gaat. De verberg-regel draagt bewust dezelfde selector-diepte als de svg-regel hierboven; met alleen .kc-themaknop__maan won die en stonden beide iconen naast elkaar. */ .kc-themaknop .kc-themaknop__maan { display: none; } :root[data-thema="donker"] .kc-themaknop__maan, .kc-thema-donker .kc-themaknop__maan { display: block; } :root[data-thema="donker"] .kc-themaknop__zon, .kc-thema-donker .kc-themaknop__zon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .kc-themaknop__maan { display: block; } :root:not([data-thema="licht"]) .kc-themaknop__zon { display: none; } /* Uitzondering: een expliciet licht thema wint van de OS-voorkeur. */ :root[data-thema="licht"] .kc-themaknop__zon { display: block; } :root[data-thema="licht"] .kc-themaknop__maan { display: none; } } /* Zwevende variant: pagina's zonder navigatiebalk (login, patient-fouten) krijgen hem rechtsboven, buiten de leesloop. */ .kc-themaknop--zwevend { position: fixed; top: 16px; right: 16px; z-index: 900; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 10px var(--kc-schaduw-1); } @media print { .kc-themaknop { display: none !important; } } /* ── 7. NIET-KLEUR-TOKENS DIE WEL PER THEMA WISSELEN ────────────────────── light-dark() geldt alleen voor . De dropdown-caret is een data-URI (geen kleur), dus die ene rol heeft wel een expliciete schakel nodig. Hou deze sectie zo kort mogelijk: alles wat een kleur IS hoort hierboven. */ :root { --kc-caret-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23655645' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --kc-caret-donker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B6A68C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --kc-caret: var(--kc-caret-licht); } @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { --kc-caret: var(--kc-caret-donker); } } :root[data-thema="donker"], .kc-thema-donker { --kc-caret: var(--kc-caret-donker); } :root[data-thema="licht"] { --kc-caret: var(--kc-caret-licht); }