/* Cerebrain gedeelde design-tokens: de CANONIEKE bron (golf 3, design-punt 1/2/5). Zowel de marketing-site (web/site.css, web/*.html) als de app (platform/app/globals.css via platform/app/tokens.css) laden deze tokens, zodat beide kanten uit dezelfde waarheid putten. MIRROR: platform/app/tokens.css is een byte-identieke kopie van dit bestand (de Next.js-build kan geen CSS buiten platform/ importeren). Wijzig ALTIJD hier en kopieer daarna naar platform/app/tokens.css. Regels: - Additief: bestaande :root-blokken in globals.css, site.css en de inline HTML-stylesheets blijven bestaan; die overschrijven deze waarden in light met identieke waarden, dus er is geen visuele regressie. - Dark/light-laag (design-punt 5): de dark-waarden staan achter zowel @media (prefers-color-scheme: dark) als een [data-theme]-override. De light- weergave blijft de default. Zolang gezet is, verandert er niets voor wie dan ook; dark wordt actief via data-theme="dark" (of door de pin weg te halen na een component-audit van hardgecodeerde witte vlakken). - Geen em-dashes of en-dashes. */ :root { color-scheme: light; /* Oppervlakken */ --paper: #ffffff; --bg: #ffffff; --surface: #ffffff; --surface-2: #f9f9f9; --surface-3: #f3f3f3; --soft: #f9f9f9; /* Inkt / tekst */ --ink: #0d0d0d; --ink-2: #5d5d5d; /* AA-contrast (design-punt 3, golf 1): #767676 haalt circa 4.6:1 op wit. */ --muted: #767676; /* Lijnen (hairlines i.p.v. schaduwen) */ --line: rgba(13, 13, 13, 0.10); --line-2: rgba(13, 13, 13, 0.16); /* Neutraal accent (near-black, het monochrome merk-zwart) */ --accent: #0d0d0d; --accent-2: #404040; --accent-wash: #f3f3f3; /* Solide knop (getokend zodat dark hem kan omdraaien zonder elke regel te raken) */ --btn-solid-bg: #0d0d0d; --btn-solid-fg: #ffffff; --btn-solid-bg-hover: #2c2932; /* Groen merk-accent (design-punt 2, golf 3). --accent-brand is het vlakken/randen- groen; --accent-brand-wash de zachte vulling/focusring; --accent-brand-ink de donkerdere afgeleide voor groene TEKST/links (haalt AA, circa 4.6:1 op wit). */ --accent-brand: #10a37f; --accent-brand-wash: rgba(16, 163, 127, 0.12); --accent-brand-ink: #0c7d61; /* Link (marketing-site) */ --link: #2964aa; /* Chat-gloed (design: aangename chatachtergrond): een nauwelijks zichtbare lichtval boven de gesprekscolonne, in het merk-groen. Bewust fluisterzacht (alpha < 0.05 in light) zodat het zwevende witte paneel en het monochrome karakter intact blijven. */ --chat-glow: radial-gradient(90% 260px at 50% 0%, rgba(16, 163, 127, 0.045), transparent 78%); /* Ambient app-schil (design-punt 5): gedempte, getokende pastel achter het zwevende witte paneel. Vroeger waren de alphas 0.38 tot 0.46; nu subtiel (circa 0.14 tot 0.18) en dark-overrulebaar. Het zwevende witte paneel (.app) blijft. */ --app-bg: radial-gradient(46% 44% at 10% 6%, rgba(255, 170, 195, 0.16), transparent 62%), radial-gradient(44% 42% at 90% 8%, rgba(174, 194, 255, 0.18), transparent 62%), radial-gradient(50% 50% at 92% 94%, rgba(170, 228, 192, 0.15), transparent 62%), radial-gradient(46% 44% at 6% 96%, rgba(250, 226, 164, 0.14), transparent 62%), #f4f2f7; } /* Dark-waarden: gedeeld door de media-query (dark-OS) en de expliciete data-theme- override. De :not([data-theme="light"]) zorgt dat een expliciete light-pin wint en dat deze regels (specificiteit hoger dan een kaal :root) de per-bestand light-tokens in dark overrulen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #191a1c; --bg: #191a1c; --surface: #191a1c; --surface-2: #212225; --surface-3: #2a2b2e; --soft: #212225; --ink: #ececec; --ink-2: #b4b4b6; --muted: #9a9a9d; --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.20); --accent: #ececec; --accent-2: #cfcfcf; --accent-wash: rgba(255, 255, 255, 0.09); --btn-solid-bg: #ececec; --btn-solid-fg: #0d0d0d; --btn-solid-bg-hover: #ffffff; --accent-brand: #2bc9a3; --accent-brand-wash: rgba(43, 201, 163, 0.16); --accent-brand-ink: #4dd4b0; --link: #7fa9e6; --chat-glow: radial-gradient(90% 260px at 50% 0%, rgba(43, 201, 163, 0.05), transparent 78%); --app-bg: radial-gradient(46% 44% at 10% 6%, rgba(255, 170, 195, 0.05), transparent 62%), radial-gradient(44% 42% at 90% 8%, rgba(174, 194, 255, 0.06), transparent 62%), radial-gradient(50% 50% at 92% 94%, rgba(170, 228, 192, 0.05), transparent 62%), radial-gradient(46% 44% at 6% 96%, rgba(250, 226, 164, 0.04), transparent 62%), #141517; } } /* Expliciete dark-override (los van de OS-voorkeur), bv. voor een toekomstige toggle. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #191a1c; --bg: #191a1c; --surface: #191a1c; --surface-2: #212225; --surface-3: #2a2b2e; --soft: #212225; --ink: #ececec; --ink-2: #b4b4b6; --muted: #9a9a9d; --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.20); --accent: #ececec; --accent-2: #cfcfcf; --accent-wash: rgba(255, 255, 255, 0.09); --btn-solid-bg: #ececec; --btn-solid-fg: #0d0d0d; --btn-solid-bg-hover: #ffffff; --accent-brand: #2bc9a3; --accent-brand-wash: rgba(43, 201, 163, 0.16); --accent-brand-ink: #4dd4b0; --link: #7fa9e6; --chat-glow: radial-gradient(90% 260px at 50% 0%, rgba(43, 201, 163, 0.05), transparent 78%); --app-bg: radial-gradient(46% 44% at 10% 6%, rgba(255, 170, 195, 0.05), transparent 62%), radial-gradient(44% 42% at 90% 8%, rgba(174, 194, 255, 0.06), transparent 62%), radial-gradient(50% 50% at 92% 94%, rgba(170, 228, 192, 0.05), transparent 62%), radial-gradient(46% 44% at 6% 96%, rgba(250, 226, 164, 0.04), transparent 62%), #141517; } /* Expliciete light-pin: houdt een pagina in light, ook op een dark-OS. Zo blijft de bestaande weergave onveranderd tot een pagina een dark-audit kreeg. */ :root[data-theme="light"] { color-scheme: light; }