/* ═══════════════════════════════════════════════════════════════════════════ theme.css — CENTRAAL CONFIGURATIEBESTAND voor Aceview ═══════════════════════════════════════════════════════════════════════════ Dit is DE plek om kleuren en fonts aan te passen. Alle andere CSS-files gebruiken de tokens (CSS variabelen) uit dit bestand. STRUCTUUR: 1. Brand tokens — de 3 hoofdkleuren (bg / ink / accent) per palette 2. Afgeleide tokens — berekende varianten (paper, muted, hair, etc.) 3. Sectie-overrides — specifieke kleuren per sectie waar nodig 4. Donker-thema — dark-mode varianten per palette 5. Fonts — lettertype-keuzes (editorial/classic/modern) 6. Lockdown tokens — vastgepinde waardes die NIET via palette wijzigen ══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1. BRAND PALETTES ═══════════════════════════════════════════════════ */ /* Drie kleuren per palette — oklch() = waarneembaar uniforme kleurruimte. Formaat: oklch(lightness% chroma hue) - lightness: 0% (zwart) → 100% (wit) - chroma: 0 (grijs) → ~0.4 (maximaal verzadigd) - hue: 0–360 graden (0=rood, 120=groen, 240=blauw) */ :root{ /* Default palette — wordt overschreven door data-palette="…" op */ --p-bg: oklch(94% 0.012 85); /* achtergrond — 60% van de pagina */ --p-ink: oklch(22% 0.012 65); /* tekst + lijnen — 30% */ --p-accent: oklch(64% 0.11 78); /* accent / spark — 10% */ } /* ——— Warm Gold (default) ——— warme papier-tint met goudgele accent */ html[data-palette="gold"]{ --p-bg: oklch(94% 0.012 85); --p-ink: oklch(22% 0.012 65); --p-accent: oklch(64% 0.11 78); } /* ——— Sage Green ——— rustige groentint */ html[data-palette="sage"]{ --p-bg: oklch(94% 0.008 130); --p-ink: oklch(22% 0.012 200); --p-accent: oklch(52% 0.08 155); } /* ——— Ink Blue ——— klassiek blauw-grijs */ html[data-palette="ink"]{ --p-bg: oklch(96% 0.004 240); --p-ink: oklch(22% 0.03 245); --p-accent: oklch(50% 0.15 250); } /* ——— Terracotta Clay ——— aardse oranje-bruin */ html[data-palette="clay"]{ --p-bg: oklch(93% 0.018 60); --p-ink: oklch(22% 0.025 30); --p-accent: oklch(55% 0.14 35); } /* ═══ 2. AFGELEIDE TOKENS ═════════════════════════════════════════════════ */ /* Alle andere kleuren zijn color-mix berekeningen op de 3 brand tokens, zodat wijzigen van één palette automatisch alles meetrekt. */ :root{ --bg: var(--p-bg); --bg-deep: color-mix(in oklab, var(--p-bg), black 4%); --paper: color-mix(in oklab, var(--p-bg), white 30%); --paper-bright: color-mix(in oklab, var(--p-bg), white 55%); --ink: color-mix(in oklab, var(--p-ink), transparent 10%); --text: color-mix(in oklab, var(--p-ink), transparent 26%); --text-soft: color-mix(in oklab, var(--p-ink), transparent 50%); --muted: color-mix(in oklab, var(--p-ink), transparent 66%); --hair: color-mix(in oklab, var(--p-ink), transparent 90%); --line: color-mix(in oklab, var(--p-ink), transparent 94%); --accent: var(--p-accent); --accent-soft: color-mix(in oklab, var(--p-accent), transparent 22%); --accent-wash: color-mix(in oklab, var(--p-accent), transparent 86%); /* Bas/Roy side-wash — koel/warm voor de duo-metafoor */ --cool: rgba(60, 76, 96, 0.10); --warm: rgba(168, 110, 60, 0.10); } /* ═══ 3. DARK MODE ════════════════════════════════════════════════════════ */ /* Swapped bg↔ink per palette met eigen accent-tuning */ html[data-theme="dark"]{ --p-bg: oklch(14% 0.012 65); --p-ink: oklch(94% 0.012 85); } html[data-theme="dark"][data-palette="sage"]{ --p-bg: oklch(15% 0.010 180); --p-ink: oklch(94% 0.006 140); --p-accent: oklch(62% 0.09 155); } html[data-theme="dark"][data-palette="ink"]{ --p-bg: oklch(13% 0.02 245); --p-ink: oklch(95% 0.005 240); --p-accent: oklch(65% 0.17 250); } html[data-theme="dark"][data-palette="clay"]{ --p-bg: oklch(14% 0.018 30); --p-ink: oklch(94% 0.01 60); --p-accent: oklch(65% 0.15 35); } /* ═══ 4. FONTS ════════════════════════════════════════════════════════════ */ /* Lettertype-sets: display (koppen), body (lopende tekst), mono (details). De '25'-kop in de hero gebruikt ALTIJD --font-25-locked (zie §5). */ :root{ /* Standaard: Editorial (Fraunces + Inter) */ --font-display: "Fraunces", "Playfair Display", Georgia, serif; --font-body: "Inter", -apple-system, "Helvetica Neue", sans-serif; --font-mono: "Space Grotesk", "SF Mono", Menlo, monospace; } /* ——— Editorial (default): Fraunces (levendig, modulair) + Inter ——— */ html[data-font="editorial"]{ --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", sans-serif; } /* ——— Classic: Playfair + Inter (klassiek redactioneel) ——— */ html[data-font="classic"]{ --font-display: "Playfair Display", Georgia, serif; --font-body: "Inter", sans-serif; } /* ——— Literary: Cormorant (hoog contrast, italic bloei) + Manrope ——— */ html[data-font="literary"]{ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Manrope", sans-serif; } /* ——— Modern: Fraunces (moderne serif) + Manrope ——— */ html[data-font="modern"]{ --font-display: "Fraunces", Georgia, serif; --font-body: "Manrope", sans-serif; } /* ——— Sharp: Space Grotesk (strak, geometrisch) + Inter ——— */ html[data-font="sharp"]{ --font-display: "Space Grotesk", sans-serif; --font-body: "Inter", sans-serif; } /* ——— Crisp: Manrope (helder, neutraal) display + Inter body ——— */ html[data-font="crisp"]{ --font-display: "Manrope", sans-serif; --font-body: "Inter", sans-serif; } /* ——— Italic toggle — beïnvloedt h1/h2/eyebrow/em die --font-style-display gebruiken ——— */ :root{ --font-style-display: italic; /* default: koppen en 'em' in italic (Aceview-stijl) */ } html[data-italic="off"]{ --font-style-display: normal; } /* ═══ 5. LOCKDOWN — vaste waardes ═════════════════════════════════════════ */ /* Deze waardes blijven ongeacht palette/font-keuze hetzelfde. */ :root{ /* '25' intro-kop — volgt site-display font zodat hij matcht met overige italic koppen */ --font-25-locked: "Cormorant Garamond", Georgia, serif; /* Vaste UI-timing */ --t-fast: .18s; --t-base: .28s; --t-slow: .45s; --ease: cubic-bezier(.22, .61, .36, 1); /* Vaste radii */ --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-xl: 28px; /* Vaste z-index schaal */ --z-nav: 100; --z-modal: 200; --z-overlay:300; }