/* ============================================================================
CK PERSONAL BUSINESS BRAND — DESIGN TOKENS
----------------------------------------------------------------------------
The single source of truth for colour across every CK digital product:
jomrefinance.com, CK PA System, and anything built later.
Import this file FIRST, before any other stylesheet. Never hardcode a brand
colour anywhere else — always reference a token from this file, so the whole
estate can be restyled by editing one place.
── CORE PALETTE ───────────────────────────────────────────────────────────
Primary Deep Emerald #176B57 trust, stability, structure
Secondary Jade Green #2A9D78 support, positive states, icons
CTA Warm Orange #E98232 conversion actions ONLY
Premium Champagne Gold #C9A45C money, milestones, sparingly
Background Warm Ivory #F7F5EF
Text Charcoal #252B2A
── ACCESSIBILITY RULES (measured, not guessed) ────────────────────────────
Three pairings fail WCAG AA and must never be used. Safe alternates given.
✗ white on CTA orange ........ 2.73:1 → use --ck-cta-on (6.12:1)
✗ Premium gold as text ....... 2.35:1 → use --ck-premium-ink (6.02:1)
gold is for fills, rules, bars
✗ Jade as small body text .... 3.11:1 → use --ck-secondary-ink (4.83:1)
jade is fine for icons and
large text at 18px+/bold 14px+
Status colours are measured against their own tinted background, because
that is the only place they ever appear (badges, chips, flash messages):
ok 5.01 · info 5.66 · warn 4.58 · danger 5.76 · KIV 6.30 — all AA at 11px.
Everything else clears AA:
text on ivory 13.2 · primary on ivory 5.9 · white on primary 6.4
white on emerald-900 11.7 · gold on emerald-900 5.0
========================================================================== */
:root{
/* ---- core brand ---- */
--ck-primary: #176B57;
--ck-secondary: #2A9D78;
--ck-cta: #E98232;
--ck-premium: #C9A45C;
--ck-bg: #F7F5EF;
--ck-text: #252B2A;
/* ---- primary scale ---- */
--ck-primary-900: #0E4034; /* deepest — footers, dark panels */
--ck-primary-800: #12564A; /* hover / pressed */
--ck-primary-700: #176B57; /* = primary */
--ck-primary-100: #D6E6E0; /* borders on tinted ground */
--ck-primary-050: #E8F1ED; /* tint fills, active nav on light */
--ck-primary-025: #F2F7F5;
/* ---- secondary scale ---- */
--ck-secondary-ink: #1C7A5C; /* jade family, safe as TEXT (4.83:1) */
--ck-secondary-600: #228363;
--ck-secondary-050: #EAF6F1;
/* ---- CTA scale ---- */
--ck-cta-on: #1A1F1E; /* text ON orange — 6.12:1, never white */
--ck-cta-600: #D97324; /* hover */
--ck-cta-700: #C2661B; /* border / pressed */
--ck-cta-050: #FDF1E6;
/* ---- premium scale ---- */
--ck-premium-ink: #7A5F22; /* gold family, safe as TEXT (6.02:1) */
--ck-premium-hair: #E0CFA4; /* hairlines, 1px rules */
--ck-premium-050: #FAF3E3;
/* ---- neutrals ---- */
--ck-white: #FFFFFF;
--ck-bg-2: #F1EEE5; /* alternating section ground */
--ck-surface: #FFFFFF; /* cards */
--ck-muted: #5C6663; /* secondary text — 5.45:1 on ivory */
--ck-muted-soft: #7C8683; /* tertiary, large text only */
--ck-line: #E4E0D6;
--ck-line-soft: #EFEBE1;
--ck-on-dark: #C8D6D0; /* body text on primary-900 — 7.76:1 */
--ck-on-dark-soft: #9BB0A8; /* secondary on dark — 5.09:1 */
/* ---- semantic status ---- */
--ck-ok: #117657; --ck-ok-bg: #E6F6EF;
--ck-info: #1D5FA8; --ck-info-bg: #E8F1FB;
--ck-warn: #96650A; --ck-warn-bg: #FDF3E0;
--ck-danger: #B32424; --ck-danger-bg: #FDECEC;
--ck-kiv: #6B3FA0; --ck-kiv-bg: #F1EAFB;
/* ---- shape & depth ---- */
--ck-r-lg: 16px;
--ck-r: 11px;
--ck-r-sm: 7px;
--ck-r-pill: 999px;
--ck-shadow-1: 0 1px 2px rgba(14,64,52,.05), 0 4px 14px rgba(14,64,52,.06);
--ck-shadow-2: 0 4px 12px rgba(14,64,52,.07), 0 14px 34px rgba(14,64,52,.08);
--ck-shadow-3: 0 20px 54px rgba(14,64,52,.16);
--ck-shadow-cta: 0 4px 14px rgba(194,102,27,.30);
/* ---- layout ---- */
--ck-sidebar: 212px; /* CK PA System nav rail */
--ck-maxw: 1160px; /* landing page content width */
/* ---- type ---- */
--ck-font-sans: 'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
--ck-font-display: 'Plus Jakarta Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}