/* ============================================================ RESILIO — DESIGN TOKENS All colour / type / radius / shadow decisions live HERE. Theme switch = data-theme attribute on . Zero markup changes. Themes are A/B test variables too (test #4 in the starting plan): resolve via ?theme=trust|dark|regulator BEFORE first paint (see inline head script in the HTML — anti-flicker). WCAG AA: every ink/bg pair in each theme >= 4.5:1. ============================================================ */ /* ---------- Skórka A "Trust" (default) — bank / institution ---------- */ :root, [data-theme="trust"] { --font-head: "IBM Plex Sans", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --bg: #F7F9FB; --bg-alt: #FFFFFF; --surface: #FFFFFF; --surface-2: #EEF3F8; --ink: #16243A; --ink-soft: #46586F; --ink-faint: #6E7E93; --primary: #15355E; --primary-ink: #FFFFFF; --primary-tint: #E4EBF4; /* CTA must be the highest-contrast element on screen */ --cta: #F59E0B; --cta-ink: #14233C; --cta-hover: #DB8B05; --cta-ring: rgba(245, 158, 11, .35); --band: #15355E; /* full-width bands (S6, S13) */ --band-ink: #F2F6FB; --band-ink-soft: #B9C8DD; --band-surface: #1D4272; --band-border: #2C5181; --border: #DCE4ED; --border-strong: #C3CFDD; --ok: #1B7F4D; --ok-bg: #E3F3EA; --bad: #B3392F; --bad-bg: #F9E8E6; --warn: #9A6A00; --warn-bg: #FBF0D9; --radius-s: 6px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-s: 0 1px 2px rgba(21, 53, 94, .07); --shadow: 0 1px 2px rgba(21, 53, 94, .06), 0 10px 28px rgba(21, 53, 94, .09); --shadow-lg: 0 2px 6px rgba(21, 53, 94, .08), 0 24px 56px rgba(21, 53, 94, .14); } /* ---------- Skórka B "Resilience Dark" — tech / modern ---------- */ [data-theme="dark"] { --font-head: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --bg: #0B1426; --bg-alt: #0E1A30; --surface: #13223E; --surface-2: #182A4A; --ink: #E8EFF9; --ink-soft: #A9B9D0; --ink-faint: #7C8FAC; --primary: #4DA3FF; --primary-ink: #06182E; --primary-tint: #16294A; --cta: #2EE6A8; --cta-ink: #06281C; --cta-hover: #25CD94; --cta-ring: rgba(46, 230, 168, .35); --band: #0E1A30; --band-ink: #E8EFF9; --band-ink-soft: #A9B9D0; --band-surface: #152645; --band-border: #233A63; --border: #233556; --border-strong: #31476E; --ok: #3DD68C; --ok-bg: #11301F; --bad: #FF7B6E; --bad-bg: #3A1714; --warn: #FFC857; --warn-bg: #33270C; --radius-s: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-s: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45); --shadow-lg: 0 2px 8px rgba(0, 0, 0, .5), 0 28px 64px rgba(0, 0, 0, .55); } /* ---------- Skórka C "Regulator Light" — official document ---------- */ [data-theme="regulator"] { --font-head: "Source Serif 4", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --bg: #FAFAF7; --bg-alt: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F1EB; --ink: #26292E; --ink-soft: #4D5158; --ink-faint: #75797F; --primary: #2B2F36; --primary-ink: #FFFFFF; --primary-tint: #EAEAE4; --cta: #1E5B3C; --cta-ink: #FFFFFF; --cta-hover: #174A30; --cta-ring: rgba(30, 91, 60, .3); --band: #2B2F36; --band-ink: #F4F4F1; --band-ink-soft: #C2C5CA; --band-surface: #383D45; --band-border: #4A4F58; --border: #E0DFD6; --border-strong: #C9C8BC; --ok: #1E5B3C; --ok-bg: #E6EFE9; --bad: #9E3A31; --bad-bg: #F6E9E7; --warn: #8A6200; --warn-bg: #F5EEDA; --radius-s: 2px; --radius: 3px; --radius-lg: 4px; --radius-pill: 3px; --shadow-s: 0 1px 1px rgba(43, 47, 54, .08); --shadow: 0 1px 2px rgba(43, 47, 54, .08), 0 6px 18px rgba(43, 47, 54, .07); --shadow-lg: 0 2px 4px rgba(43, 47, 54, .1), 0 16px 40px rgba(43, 47, 54, .12); } /* ---------- Skórka D "Evergreen" — light base, deep-green typography ---------- */ [data-theme="evergreen"] { --font-head: "IBM Plex Sans", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --bg: #F5F8F4; --bg-alt: #FFFFFF; --surface: #FFFFFF; --surface-2: #E7F0E8; --ink: #14301E; --ink-soft: #3A5544; --ink-faint: #5E7567; --primary: #1C5234; --primary-ink: #FFFFFF; --primary-tint: #DDEBE0; --cta: #E08A1E; --cta-ink: #221504; --cta-hover: #C87914; --cta-ring: rgba(224, 138, 30, .35); --band: #173E27; --band-ink: #EDF5EE; --band-ink-soft: #B6CFBE; --band-surface: #205036; --band-border: #2E6044; --border: #D8E4D9; --border-strong: #BED0C1; --ok: #1B7A45; --ok-bg: #E0F1E6; --bad: #B3392F; --bad-bg: #F9E8E6; --warn: #936300; --warn-bg: #F7EFD8; --radius-s: 6px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-s: 0 1px 2px rgba(20, 48, 30, .07); --shadow: 0 1px 2px rgba(20, 48, 30, .06), 0 10px 28px rgba(20, 48, 30, .1); --shadow-lg: 0 2px 6px rgba(20, 48, 30, .08), 0 24px 56px rgba(20, 48, 30, .14); } /* ---------- Skórka E "Plum" — light base, deep-aubergine typography ---------- */ [data-theme="plum"] { --font-head: "IBM Plex Sans", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --bg: #FAF6FB; --bg-alt: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0E8F3; --ink: #2A1638; --ink-soft: #4E3A5C; --ink-faint: #74667F; --primary: #5C2A7C; --primary-ink: #FFFFFF; --primary-tint: #ECE0F2; --cta: #0E9488; --cta-ink: #FFFFFF; --cta-hover: #0B7E73; --cta-ring: rgba(14, 148, 136, .35); --band: #3A1E50; --band-ink: #F3ECF6; --band-ink-soft: #C9B8D3; --band-surface: #4A2A63; --band-border: #5C3A77; --border: #E6DCEA; --border-strong: #D2C2DA; --ok: #1B7F4D; --ok-bg: #E3F3EA; --bad: #B3392F; --bad-bg: #F9E8E6; --warn: #8A5E00; --warn-bg: #F6EDD7; --radius-s: 6px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-s: 0 1px 2px rgba(42, 22, 56, .07); --shadow: 0 1px 2px rgba(42, 22, 56, .06), 0 10px 28px rgba(42, 22, 56, .1); --shadow-lg: 0 2px 6px rgba(42, 22, 56, .08), 0 24px 56px rgba(42, 22, 56, .14); }