/* design.css — één stijlbron voor de hoofdapp én de utility-apps (DESIGN.md legt uit). Referentie: het Utilities-menu van de hoofdapp. Volgt het systeemthema: licht is de basis, donker via prefers-color-scheme — geen "first" meer. Laad dit als LAATSTE stylesheet: de waarden hieronder overschrijven dan de lokale :root-tokens van een app (zelfde namen), terwijl app-specifieke extra's blijven staan. */ html { background: var(--bg); } /* no white flash before is parsed */ :root { /* kleur — canonieke namen (hoofdapp) */ --bg: #f5f6f8; --card-bg: #ffffff; --text: #1a1d24; --text-dim: #5a6270; --border: #dde1e6; --skip: #4a90d9; /* accent: links, primaire knoppen, "iets voor jou" in blauw */ --keep: #2fae66; /* ok / iconen in tegels */ --dismiss: #d9534f; /* gevaar / verwijderen */ --warn: #d9a441; /* let op */ /* vorm, ruimte, letter */ --radius: 14px; --radius-sm: 10px; --radius-lg: 22px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --shadow: 0 1px 2px rgba(0, 0, 0, 0.06); /* aliassen — namen die de utility-apps al gebruiken, zodat hun CSS ongemoeid blijft */ --card: var(--card-bg); --muted: var(--text-dim); --line: var(--border); --blue: var(--skip); --green: var(--keep); --red: var(--dismiss); --good: var(--keep); --bad: var(--dismiss); /* géén --accent/--btn: ChordSprint heeft een eigen accent en de hoofdapp gebruikt --accent anders; die apps krijgen hun eigen ronde (zie docs/ux-ui-plan.md). */ } @media (prefers-color-scheme: dark) { :root { --bg: #0f1115; --card-bg: #1a1d24; --text: #eef0f3; --text-dim: #9aa1ac; --border: #2a2e37; --shadow: none; } } /* ---- thema's van de hoofdapp (Settings → Appearance) ---------------------- Zelfde paletten als de hoofdapp; theme.js zet in de hoofdapp, theme-sync.js doet dat in elke utility-app (leest het actieve thema dat theme.js wegschrijft). Specificiteit (0,2,0) wint van :root hierboven, dus een gekozen thema gaat vóór het systeemthema. */ :root[data-theme="dark"], .theme-swatch[data-theme="dark"] { --bg: #0f1115; --card-bg: #1c2029; --text: #eef0f3; --text-dim: #a5acb8; --border: #333945; --keep: #2fae66; --dismiss: #d9534f; --skip: #4a90d9; --accent: #4a90d9; } /* Nova — the "professional" theme: deep blue-black canvas, indigo accent, soft gold highlight; extra depth via the [data-theme="nova"] overrides near the end of this file. */ :root[data-theme="nova"], .theme-swatch[data-theme="nova"] { --bg: #111420; --card-bg: #1c2133; --text: #e8eaf2; --text-dim: #9aa0b5; --border: #2e3450; --keep: #34c07c; --dismiss: #e2606b; --skip: #6d7cff; --accent: #6d7cff; --gold: #d8b46a; } :root[data-theme="light"], .theme-swatch[data-theme="light"] { --bg: #f5f6f8; --card-bg: #ffffff; --text: #1a1d24; --text-dim: #5a6270; --border: #dde1e6; --keep: #2fae66; --dismiss: #d9534f; --skip: #2f74d0; --accent: #1a1d24; } :root[data-theme="orange"], .theme-swatch[data-theme="orange"] { --bg: #fff6ee; --card-bg: #ffffff; --text: #3a2415; --text-dim: #9c7a60; --border: #f3ddc9; --keep: #2fae66; --dismiss: #d9534f; --skip: #e8730c; --accent: #e8730c; } :root[data-theme="ocean"], .theme-swatch[data-theme="ocean"] { --bg: #0b1622; --card-bg: #132433; --text: #e6eef5; --text-dim: #8aa0b3; --border: #223649; --keep: #2bb3a3; --dismiss: #e0655f; --skip: #3d9be0; --accent: #7fd4ff; } :root[data-theme="forest"], .theme-swatch[data-theme="forest"] { --bg: #0e1712; --card-bg: #17241c; --text: #e8f0e8; --text-dim: #93a894; --border: #26382c; --keep: #43b96a; --dismiss: #d9713f; --skip: #5aa06a; --accent: #a6e3b0; } /* ---- the 2026-08-19 trio: a polished dark / normal / light set ---- Carbon — flagship dark: near-black layered neutrals, azure accent. Slate — "normal": muted graphite between light and dark, calm default. Porcelain — clean warm-neutral light with soft paper shadows. */ :root[data-theme="carbon"], .theme-swatch[data-theme="carbon"] { --bg: #0a0c10; --card-bg: #151920; --text: #f2f4f8; --text-dim: #929cab; --border: #262c37; --keep: #34c37c; --dismiss: #ef5d64; --skip: #5b9dff; --accent: #5b9dff; } :root[data-theme="slate"], .theme-swatch[data-theme="slate"] { --bg: #222831; --card-bg: #2b323d; --text: #e9edf2; --text-dim: #a0aab7; --border: #3a4350; --keep: #43b97c; --dismiss: #e26a60; --skip: #74a5e0; --accent: #74a5e0; } :root[data-theme="porcelain"], .theme-swatch[data-theme="porcelain"] { --bg: #f4f3f0; --card-bg: #ffffff; --text: #22262e; --text-dim: #626b78; --border: #e2e1db; --keep: #279d5c; --dismiss: #d05252; --skip: #3568c4; --accent: #3568c4; } /* Emoji+ : a bright, playful light palette that also sprinkles emoji onto the main labels (see accents below) for a friendlier home screen. */ :root[data-theme="emoji"], .theme-swatch[data-theme="emoji"] { --bg: #fbf3ff; --card-bg: #ffffff; --text: #2a2140; --text-dim: #8a7fa8; --border: #ecdcfb; --keep: #2fae66; --dismiss: #f0616f; --skip: #7c5cff; --accent: #ff9f43; } /* ---- het contrasttrio van 2026-09-08: pagina en kaart in tegengestelde toon ---- Chalk — bijna-zwarte pagina, witte kaarten. Blueprint — diep marineblauwe pagina, crème kaarten. Ink — warm papieren pagina, inktdonkere kaarten. Hier staat de VLAKKE variant (kaart in de toon van de pagina), zodat een utility-app die alleen --text kent leesbaar blijft; de hoofdapp zet in style.css de echte kaartkleur + kaart-tokens. */ :root[data-theme="chalk"], .theme-swatch[data-theme="chalk"] { --bg: #121212; --card-bg: #1d1d1d; --text: #f2f2f2; --text-dim: #9c9c9c; --border: #2e2e2e; --keep: #2a9d5c; --dismiss: #d64545; --skip: #2f6fe0; --accent: #2f6fe0; } :root[data-theme="blueprint"], .theme-swatch[data-theme="blueprint"] { --bg: #0b2545; --card-bg: #143359; --text: #eaf1fb; --text-dim: #9fb4d2; --border: #23416a; --keep: #2a9d5c; --dismiss: #d64545; --skip: #2f7bf0; --accent: #2f7bf0; } :root[data-theme="ink"], .theme-swatch[data-theme="ink"] { --bg: #efe9df; --card-bg: #faf7f1; --text: #1f2328; --text-dim: #5f656e; --border: #d9d0c2; --keep: #2f9e5f; --dismiss: #d7503f; --skip: #c2622b; --accent: #c2622b; } /* Kaart-tokens: wat er bínnen een kaart geldt. Standaard gelijk aan de paginatokens, dus voor de gewone thema's verandert er niets; de contrastthema's en een eigen thema (thema-editor) zetten ze apart in de hoofdapp. --page-bg is de opgeloste paginakleur, zodat een kaart --bg mag hermappen zonder kringverwijzing. Ook op .theme-swatch, zodat een swatch zijn eigen palet leest. */ :root, .theme-swatch { --card-text: var(--text); --card-text-dim: var(--text-dim); --card-border: var(--border); --page-bg: var(--bg); }