/* ============================================================ citu.ai landing — Design Tokens ------------------------------------------------------------ Source of truth for the design system. Every color, type ramp, spacing, radius and shadow in the site is defined here. Models (Claude Design, Claude Code, Cursor) and human devs should read this file FIRST and then `var(--token)` in the CSS — never hardcode a hex/px that has a token equivalent. Naming convention: --brand-* Citu / Click2invest visual identity --surface-* Background layers (deepest → highest) --text-* Foreground colors by emphasis --semantic-* Positive / negative / info (status meanings) --wa-* WhatsApp dark-mode palette — used ONLY by the chat preview to keep visual fidelity with the real WhatsApp UI. Not part of the citu DS. --font-* Font-family stacks --fs-* Font sizes (responsive clamp()) --space-* Spacing scale (4px-based) --radius-* Border radii --shadow-* Box-shadows (incl. glow effects) --motion-* Transition durations / easings When in doubt: add a new token here, don't inline. ============================================================ */ :root{ /* ---------- Brand colors ---------- */ --brand-primary : #2563eb; /* royal blue — the Citu signature */ --brand-primary-dark : #1d4ed8; /* hover/active deeper royal */ --brand-primary-deep : #1e3a8a; /* deepest blue (dot rim, gradients) */ --brand-accent : #3b82f6; /* glow & rings */ --brand-light : #60a5fa; /* mid highlight */ --brand-lighter : #93c5fd; /* tagline emphasis, link hover, eyebrow */ --brand-lightest : #cfe0ff; /* h1 gradient bottom stop */ --brand-soft : #dbeafe; /* specular highlight (favicon) */ /* ---------- Surfaces (deepest → highest) ---------- */ --surface-base : #06080d; /* page background */ --surface-elevated : #0a0d14; /* phone outer shell */ --surface-input : rgba(255,255,255,.04); /* form input bg */ --surface-input-focus : rgba(255,255,255,.06); --surface-glass : rgba(15,23,42,.5); /* lang toggle pill */ --surface-pill : rgba(31,44,51,.7); /* day-pill blur bg */ /* ---------- Text ---------- */ --text-bright : #fff; /* pure white — number highlights, button glyphs */ --text-primary : #f5f5f5; /* default body text */ --text-secondary : #cbd5e1; /* tagline body */ --text-muted : #94a3b8; /* byline brand emphasis */ --text-dim : #64748b; /* byline base, placeholder */ --text-faint : #888; /* footer text in legal pages */ /* ---------- Semantic (status) ---------- */ --semantic-success : #7ee2a8; /* positive PnL, success messages */ --semantic-success-bg : rgba(0,168,132,.18); /* exec chip bg */ --semantic-success-bd : rgba(0,168,132,.4); /* exec chip border */ --semantic-success-dot: #00A884; /* exec chip dot (matches wa-accent) */ --semantic-danger : #ffb4b4; /* negative PnL inline */ --semantic-danger-msg : #fca5a5; /* form error message text */ --semantic-danger-bd : #f87171; /* form input invalid border */ --link : #7dd3fc; /* hyperlinks in legal pages */ /* ---------- WhatsApp dark-mode palette (chat preview only) ---------- */ --wa-bg-app : #111B21; --wa-bg-chat : #0B141A; --wa-bg-header : #1F2C33; --wa-bg-input : #2A3942; --wa-bubble-in : #1F2C33; --wa-bubble-out : #005C4B; --wa-text : #E9EDEF; --wa-text-secondary : #8696A0; --wa-tick-read : #53BDEB; --wa-tick-default : #8696A0; --wa-accent : #00A884; --wa-divider : rgba(134,150,160,0.15); --wa-shadow : 0 1px .5px rgba(11,20,26,0.13); /* ---------- Fonts ---------- */ --font-brand : "Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --wa-font : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Apple Color Emoji","Segoe UI Emoji",Arial,sans-serif; --font-mono : ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ---------- Font sizes (responsive) ---------- */ --fs-h1 : clamp(2.75rem, 9vw, 3.75rem); --fs-byline : clamp(.92rem, 2.4vw, 1rem); --fs-tagline : clamp(1.1rem, 3vw, 1.3rem); --fs-eyebrow : clamp(.9rem, 2.2vw, .92rem); /* waitlist heading */ --fs-body : 1rem; --fs-small : .85rem; --fs-tiny : .78rem; --fs-input : .95rem; --fs-input-msg : .82rem; /* WhatsApp-specific sizes (faithful to the real app) */ --fs-wa-msg : 14.2px; --fs-wa-meta : 11px; --fs-wa-header : 16px; --fs-wa-status : 13px; --fs-wa-input : 15px; --fs-wa-pill : 12.5px; /* ---------- Spacing scale (4px-based) ---------- */ --space-1 : .25rem; /* 4 */ --space-2 : .5rem; /* 8 */ --space-3 : .75rem; /* 12 */ --space-4 : 1rem; /* 16 */ --space-5 : 1.5rem; /* 24 */ --space-6 : 2rem; /* 32 */ --space-7 : 3rem; /* 48 */ --space-8 : 4rem; /* 64 */ /* ---------- Border radii ---------- */ --radius-sm : 4px; /* exec chip, pill */ --radius-md : 7.5px; /* WhatsApp bubble */ --radius-lg : 12px; /* form input, form button */ --radius-xl : 14px; /* favicon rounded square */ --radius-phone : 28px; /* phone frame */ --radius-pill : 999px; /* lang toggle */ --radius-circle: 50%; /* ---------- Shadows / glows ---------- */ --shadow-phone : 0 40px 100px -25px rgba(37,99,235,.35), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px rgba(37,99,235,.05); --shadow-pulse : 0 0 18px rgba(37,99,235,.7), 0 0 4px rgba(147,197,253,.9) inset; --shadow-btn : 0 8px 24px -8px rgba(37,99,235,.5); --shadow-btn-h : 0 12px 32px -10px rgba(37,99,235,.62); --shadow-text : 0 0 22px rgba(37,99,235,.18); /* drop-shadow on h1 */ --shadow-bubble: var(--wa-shadow); --ring-focus : 0 0 0 4px rgba(37,99,235,.18); --ring-error : 0 0 0 4px rgba(248,113,113,.15); /* ---------- Motion ---------- */ --motion-fast : .15s ease; --motion-base : .25s ease; --motion-slow : .35s ease; --motion-drift : 18s ease-in-out infinite alternate; /* ---------- Layout breakpoints (also used in @media) ---------- For reference only — CSS custom props can't be used in @media queries directly, but documenting them here keeps tools and reviewers in sync. */ --bp-mobile-max : 600px; --bp-tablet-max : 919.98px; --bp-desktop-min : 920px; }