/* tool/web/stijl/basis.css Tokens, reset en typografie โ€” ITARR 2.0-canon (bron: itarr-nl-next/app/ globals.css voor de Azul-ladder en het donkere thema, itarr-platform voor de statusfamilies en het productidioom). Licht is de identiteit; donker is dezelfde Azul-ladder van de andere kant gelezen. Thema-mechaniek: licht is ALTIJD de standaard, ongeacht OS-voorkeur. Donker wordt uitsluitend gezet via `data-theme="dark"` op (pre-paint script in index.html, localStorage-sleutel `gulden-thema`) โ€” GEEN `prefers-color-scheme` voor inhoudskleuren. Elke kleur staat daarom op `:root` als lichte standaard en wordt letterlijk herhaald in het `[data-theme="dark"]`-blok; nooit alleen in een media- of data-theme-blok. */ @font-face { font-family: "Inter"; src: url("/merk/fonten/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Schibsted Grotesk"; src: url("/merk/fonten/SchibstedGrotesk-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/merk/fonten/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* --- Azul-ladder: fysieke merkkleuren, ongewijzigd door thema ---------- */ --azul: #0c004c; --azul-licht: #1a1a6e; --azul-30: #554d82; --azul-48: #817aa2; --azul-68: #b1adc6; --azul-76: #c5c2d4; --azul-82: #d3d1df; --azul-87: #dfdee8; --kalk-azul: #c9c3ea; --nacht: #0e0b24; --nacht-vlak: #171334; --nacht-hairline: #2c2752; /* --- Semantische tokens: licht (standaard) ----------------------------- */ --papier: #ffffff; --papier-2: #f4f6fb; --vlak: #f4f6fb; --vlak-hoog: #ffffff; --inkt: #17142e; --inkt-2: #504e63; --inkt-3: #77758a; --accent: var(--azul); --accent-zacht: var(--azul-30); --hairline: var(--azul-68); --nevel: var(--azul-82); --cta-bg: var(--azul); --cta-tekst: #ffffff; --fout: #963a46; --schaduw-kleur: 12, 0, 76; /* --- Statusfamilies (drieslag: kleur, tint, rand) ----------------------- */ --ok: #047857; --ok-tint: #ecfdf5; --ok-rand: #a7f3d0; --wacht: #b45309; --wacht-tint: #fffbeb; --wacht-rand: #fde68a; --fout-tint: color-mix(in srgb, var(--fout) 8%, white); --fout-rand: color-mix(in srgb, var(--fout) 28%, white); /* --- Gereserveerd: AI-persona-kleur, nooit de merk- of signaalkleur (Verbond ยง15). Nog ongebruikt in Gulden, wel al getokend. --------------- */ --gulden-persona-kleur: #2c8c8c; --gulden-persona-kleur-vlak: #e4f4f4; /* --- Gereserveerd: goud is het toekomstige Gulden-productaccent, NIET het huidige merkaccent (dat is Azul). Ongebruikt tot dat besluit valt. ------ */ --goud: #a87c1f; --goud-tekst: #7a5a14; --goud-vlak: #f7f0dd; /* --- Compat-aliassen voor inline gebruik in schermen (forecast.ts) ------ */ --azul-vlak: color-mix(in srgb, var(--accent) 12%, var(--papier)); --blokkerend: var(--fout); /* --- Samengestelde schaduw op basis van het rgb-triplet ----------------- */ --schaduw: 0 1px 2px rgba(var(--schaduw-kleur), 0.06), 0 8px 24px rgba(var(--schaduw-kleur), 0.08); /* --- Typografie ---------------------------------------------------------- */ --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-heading: "Schibsted Grotesk", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* --- Layout --------------------------------------------------------------- */ --radius-klein: 6px; --radius-knop: 4px; --sidenav-breedte: 216px; } [data-theme="dark"] { --papier: #0e0b24; --papier-2: #131030; --vlak: #171334; --vlak-hoog: #1c1840; --inkt: #eceaf6; --inkt-2: #b6b2ce; --inkt-3: #8b87a8; --accent: var(--kalk-azul); --accent-zacht: #8f89bb; --hairline: #2c2752; --nevel: #221e45; --cta-bg: #eceaf6; --cta-tekst: var(--azul); --fout: #e5a9b0; --schaduw-kleur: 0, 0, 0; /* Statusfamilies donker: zelfde familie/tint als licht, maar lichter en zachter (het --fout-model: #963a46 โ†’ #e5a9b0 blijft dezelfde tint, wordt alleen lichter). Tint/rand mixen daarom tegen de donkere vlakkleur in plaats van tegen wit, en met een hoger aandeel kleur zodat het zichtbaar blijft op een donker oppervlak. */ --ok: #7fd9b8; --ok-tint: color-mix(in srgb, var(--ok) 14%, var(--vlak)); --ok-rand: color-mix(in srgb, var(--ok) 38%, var(--vlak)); --wacht: #f0c184; --wacht-tint: color-mix(in srgb, var(--wacht) 14%, var(--vlak)); --wacht-rand: color-mix(in srgb, var(--wacht) 38%, var(--vlak)); --fout-tint: color-mix(in srgb, var(--fout) 14%, var(--vlak)); --fout-rand: color-mix(in srgb, var(--fout) 38%, var(--vlak)); --gulden-persona-kleur: #59c2c2; --gulden-persona-kleur-vlak: #12302e; --goud: #d9b25c; --goud-tekst: #e7ce8e; --goud-vlak: #2e2712; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--papier); color: var(--inkt); font-size: 14px; line-height: 1.5; min-height: 100vh; font-variant-numeric: tabular-nums; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; color: var(--inkt); margin: 0; } p { margin: 0 0 8px; } p:last-child { margin-bottom: 0; } a { color: inherit; } button { font-family: inherit; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } table { font-variant-numeric: tabular-nums; } .mono-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--inkt-3); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }