/* ═══════════════════════════════════════════════════════════════════ * Kak Kenduri — Corporate CI design tokens * v2.0 · 2026-08-13 · Kak Kenduri Sdn Bhd * * Single source of truth. Consume anywhere via CSS custom properties. * Token names are unchanged from v1.0 so existing consumers keep working. * * NEW IN v2.0 — read before using orange: * --kk-orange (#FF6600) is a FILL colour, never a text colour. * For orange text use --kk-orange-text (#993D00). * For labels sitting ON an orange or WhatsApp fill use --kk-on-accent. * See the "on-colour" block below. Every pairing here is measured. * ═══════════════════════════════════════════════════════════════════ */ :root { /* ─── Brand colour (5) ─── */ --kk-navy: #003B78; /* Deep Navy — primary · 60% */ --kk-cream: #FFF7EF; /* Warm Cream — surface · 25% */ --kk-orange: #FF6600; /* Celebration Orange — accent · 10% */ --kk-grey: #E9EEF3; /* Soft Grey — neutral · 3% */ --kk-charcoal: #1A1A1A; /* Charcoal — text · 2% */ /* ─── Navy ramp ─── */ --kk-navy-50: #E6EEF5; --kk-navy-100: #B8CFE2; --kk-navy-300: #4C7BB0; --kk-navy-600: #002C5A; --kk-navy-900: #001E3D; /* ─── Orange ramp ─── */ --kk-orange-50: #FFF1E5; --kk-orange-100: #FFD4B0; --kk-orange-300: #FF9952; --kk-orange-600: #E55C00; --kk-orange-900: #993D00; /* ─── On-colour pairings (all measured, all AA at body size) ─── * Use these for label colours. Do not improvise. * cream on #FF6600 .... 2.77:1 FAILS — never do this * cream on #25D366 .... 1.87:1 FAILS — never do this */ --kk-on-navy: #FFF7EF; /* cream on navy ......... 10.44:1 ✓ */ --kk-on-accent: #1A1A1A; /* charcoal on orange ..... 5.93:1 ✓ */ --kk-on-wa: #FFFFFF; /* white on WhatsApp ...... 1.98:1 — below AA. A deliberate brand decision, not an oversight. The green takes a light label only: white here, cream (1.87:1) where surrounding type is cream. Charcoal measures 8.78:1 but is NOT permitted — a dark label stops the pill reading as WhatsApp. Do not "fix" this by darkening the label. */ --kk-on-danger: #1A1A1A; /* charcoal on danger ..... 5.69:1 ✓ */ --kk-on-success: #1A1A1A; /* charcoal on success .... 9.85:1 ✓ */ --kk-on-warn: #1A1A1A; /* charcoal on warn ...... 10.42:1 ✓ */ /* ─── Text-safe orange ─── * #FF6600 on cream is 2.77:1 — it fails body AND large text. * Use this instead whenever orange must carry a letterform. */ --kk-orange-text: #993D00; /* on cream ... 6.55:1 ✓ · on white ... 6.95:1 ✓ */ /* ─── Ambient gradients — hero washes ONLY ─── * Never on buttons, never behind text, never on the wordmark. * The navy/orange wordmark split IS the brand contrast. */ --kk-grad-navy: linear-gradient(120deg, #003B78 0%, #0A5BA8 50%, #1E78C9 100%); --kk-grad-orange: linear-gradient(120deg, #FF6600 0%, #FF8533 50%, #FFB37A 100%); --kk-grad-sunrise: linear-gradient(120deg, #003B78 0%, #1E78C9 50%, #FF6600 100%); /* ─── Status ─── */ --kk-success: #3DDC97; --kk-warn: #F5C13D; --kk-danger: #FF5A5A; /* ─── WhatsApp — the primary booking channel ─── */ --kk-wa: #25D366; /* ─── Data-viz (7 categorical) ─── */ --kk-dv-1: #003B78; --kk-dv-2: #FF6600; --kk-dv-3: #1E78C9; --kk-dv-4: #0E6E5C; --kk-dv-5: #F5C13D; --kk-dv-6: #9B7FE5; --kk-dv-7: #7A7D82; /* ─── Typography ─── */ --kk-font-display: 'Poppins', system-ui, -apple-system, sans-serif; --kk-font-body: 'Inter', system-ui, -apple-system, sans-serif; --kk-fw-regular: 400; --kk-fw-medium: 500; --kk-fw-semi: 600; --kk-fw-bold: 700; --kk-fw-extra: 800; --kk-fs-display: 64px; --kk-fs-h1: 48px; --kk-fs-h2: 32px; --kk-fs-h3: 22px; --kk-fs-body: 15px; --kk-fs-small: 13px; --kk-fs-micro: 11px; --kk-lh-display: 1.05; --kk-lh-heading: 1.1; --kk-lh-body: 1.55; --kk-ls-display: -0.025em; --kk-ls-h1: -0.02em; --kk-ls-h2: -0.015em; --kk-ls-h3: -0.01em; --kk-ls-body: 0; --kk-ls-caps: 0.12em; /* ─── Radius ─── */ --kk-r-button: 8px; --kk-r-card: 12px; --kk-r-pill: 999px; /* ─── Spacing scale (4px base) ─── */ --kk-s-1: 4px; --kk-s-2: 8px; --kk-s-3: 12px; --kk-s-4: 16px; --kk-s-5: 20px; --kk-s-6: 24px; --kk-s-8: 32px; --kk-s-10: 40px; --kk-s-12: 48px; --kk-s-16: 64px; /* ─── Button sizes — px not em, so labels never wrap ─── */ --kk-btn-sm-h: 32px; --kk-btn-sm-px: 12px; --kk-btn-sm-fs: 11px; --kk-btn-sm-ic: 14px; --kk-btn-sm-gap: 6px; --kk-btn-md-h: 40px; --kk-btn-md-px: 20px; --kk-btn-md-fs: 13px; --kk-btn-md-ic: 16px; --kk-btn-md-gap: 8px; --kk-btn-lg-h: 48px; --kk-btn-lg-px: 28px; --kk-btn-lg-fs: 15px; --kk-btn-lg-ic: 20px; --kk-btn-lg-gap: 10px; /* ─── Motion ─── */ --kk-dur-hover: 220ms; --kk-dur-layout: 320ms; --kk-dur-page: 480ms; --kk-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ─── Shadow ─── */ --kk-shadow-card: 0 1px 2px rgba(0,32,72,0.05), 0 4px 12px rgba(0,32,72,0.06); --kk-shadow-hover: 0 2px 4px rgba(0,32,72,0.07), 0 10px 28px rgba(0,32,72,0.11); --kk-shadow-btn-navy: 0 1px 0 rgba(255,255,255,0.16) inset, 0 2px 8px rgba(0,59,120,0.24); --kk-shadow-btn-orange: 0 1px 0 rgba(255,255,255,0.20) inset, 0 2px 8px rgba(255,102,0,0.28); --kk-shadow-btn-wa: 0 1px 0 rgba(255,255,255,0.20) inset, 0 2px 8px rgba(37,211,102,0.28); /* ─── Focus ring — orange, 3px, always visible ─── */ --kk-focus: 0 0 0 3px rgba(255,102,0,0.38); /* ─── Semantic (light theme, default) ─── */ --kk-bg: var(--kk-cream); --kk-surface: #FFFFFF; --kk-raised: #FFFDFB; --kk-text: var(--kk-charcoal); --kk-muted: #5A6470; /* on cream 5.67:1 ✓ */ --kk-border: rgba(0,59,120,0.14); --kk-hairline:rgba(0,59,120,0.08); --kk-primary: var(--kk-navy); --kk-accent: var(--kk-orange); } /* ─── Dark theme — signage, social, lorry wrap, app dark mode ─── */ [data-theme="dark"] { --kk-bg: var(--kk-navy-900); --kk-surface: var(--kk-navy); --kk-raised: var(--kk-navy-600); --kk-text: var(--kk-cream); --kk-muted: #B5C2D1; /* on navy 6.9:1 ✓ */ --kk-border: rgba(255,247,239,0.16); --kk-hairline: rgba(255,247,239,0.09); /* --kk-primary and --kk-accent never change — they are the brand */ } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { :root { --kk-dur-hover: 0ms; --kk-dur-layout: 0ms; --kk-dur-page: 0ms; } }