/* ============================================================= SuperKYC — Design Tokens The single source of truth for the brand. Everything else (base.css, components, pages) should reference these vars and never hardcode a colour, size, or radius. Direction: "SIGNAL" — deep ink navy (trust) + one ownable electric-lime accent (active / verified / go). Cool neutrals. Lime rule of thumb: use it as a FILL (lime bg + navy text) or as text ON DARK surfaces. It is NOT legible as text on white — for accent text on light surfaces use navy (handled by the themed --color-accent-fg token below, so you rarely think about it). ============================================================= */ :root { /* --------------------------------------------------------- 1. RAW PALETTE (don't reference directly in markup — use the semantic tokens in section 2) --------------------------------------------------------- */ /* Brand — deep navy "ink" (surfaces, headings, dark hero) */ --ink-950: #060d17; --ink-900: #0b1422; --ink-800: #0f1e30; --ink-700: #16293f; --ink-600: #1e3a56; /* Brand — electric lime "signal" (CTAs, accents, glow) */ --lime-300: #dbf98a; --lime-400: #c6f24e; /* the signature accent */ --lime-500: #aee636; /* hover / deeper */ --lime-600: #8fbe22; /* Neutrals — cool slate */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --white: #ffffff; /* Functional (kept distinct from brand lime to avoid confusion) */ --green-500: #16a34a; /* success */ --green-50: #f0fdf4; --amber-500: #d97706; /* warning */ --amber-50: #fffbeb; --red-500: #dc2626; /* danger / error */ --red-50: #fef2f2; /* --------------------------------------------------------- 2. SEMANTIC TOKENS (use these everywhere — theme-able) Light theme is the default below. --------------------------------------------------------- */ /* Surfaces & text */ --color-bg: var(--white); --color-bg-subtle: var(--gray-50); --color-surface: var(--white); --color-surface-raised: var(--white); --color-text: var(--ink-900); --color-text-muted: var(--gray-500); --color-text-inverse: var(--white); --color-border: var(--gray-200); --color-border-strong: var(--gray-300); /* Brand roles */ --color-primary: var(--lime-400); /* CTA fills */ --color-primary-hover: var(--lime-500); --color-primary-active: var(--lime-600); --color-on-primary: var(--ink-900); /* text on lime */ --color-accent: var(--lime-400); --color-ink: var(--ink-900); /* Accent TEXT (links, eyebrows, wordmark accent) — themed so it stays legible: navy on light, lime on dark. */ --color-accent-fg: var(--ink-700); --color-accent-fg-hover: var(--ink-900); /* States */ --color-success: var(--green-500); --color-success-bg: var(--green-50); --color-warning: var(--amber-500); --color-warning-bg: var(--amber-50); --color-danger: var(--red-500); --color-danger-bg: var(--red-50); /* Focus ring — navy on light (lime is too low-contrast on white) */ --color-focus: var(--ink-700); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent); /* Brand gradients */ --gradient-brand: linear-gradient(120deg, var(--lime-400) 0%, var(--lime-300) 100%); /* use on DARK */ --gradient-ink: linear-gradient(160deg, var(--ink-900) 0%, var(--ink-800) 55%, var(--ink-700) 100%); /* Lime glow for hero CTAs on dark */ --shadow-glow: 0 10px 30px color-mix(in srgb, var(--lime-400) 30%, transparent); /* --------------------------------------------------------- 3. TYPOGRAPHY --------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Display / brand — the wordmark and big headlines */ --font-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale (practical major-third-ish) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 3.75rem; /* 60 */ --text-7xl: 4.5rem; /* 72 */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* --------------------------------------------------------- 4. SPACING (4px base scale) --------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* --------------------------------------------------------- 5. RADII, BORDERS, SHADOWS, MOTION, LAYOUT --------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --border-width: 1px; --shadow-xs: 0 1px 2px rgba(11, 20, 34, 0.05); --shadow-sm: 0 1px 3px rgba(11, 20, 34, 0.08), 0 1px 2px rgba(11, 20, 34, 0.04); --shadow-md: 0 4px 12px rgba(11, 20, 34, 0.08), 0 2px 4px rgba(11, 20, 34, 0.04); --shadow-lg: 0 12px 28px rgba(11, 20, 34, 0.12), 0 4px 8px rgba(11, 20, 34, 0.05); --shadow-xl: 0 24px 48px rgba(11, 20, 34, 0.16); --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; } /* ============================================================= DARK THEME — or on any section. This is the hero/header/footer context where lime shines. ============================================================= */ [data-theme="dark"] { --color-bg: var(--ink-950); --color-bg-subtle: var(--ink-900); --color-surface: var(--ink-900); --color-surface-raised: var(--ink-800); --color-text: var(--gray-100); --color-text-muted: var(--gray-400); --color-text-inverse: var(--ink-900); --color-border: color-mix(in srgb, var(--white) 10%, transparent); --color-border-strong: color-mix(in srgb, var(--white) 18%, transparent); /* On dark, accent text becomes lime */ --color-accent-fg: var(--lime-400); --color-accent-fg-hover: var(--lime-300); /* Lime focus ring reads well on dark */ --color-focus: var(--lime-400); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6); } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } }