/* website·lo — design tokens (v1.0) * Light-mode-first, warm-tinted neutrals, one accent + warm secondary. * Import the fonts in your : * Space Grotesk (display), Inter (body/UI), JetBrains Mono (labels/code) * e.g. https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap */ :root { /* --- brand accents --- */ --lo-blue: #2FC2F7; /* brand blue (bright cyan-blue) */ --lo-blue-text: #0E7FAD; /* darker shade for links/small text on light bg (contrast) */ --lo-blue-hover: #57D0FA; --lo-blue-pressed: #1AA3D9; --lo-blue-deep: #0E7FAD; /* deep end for gradients / solid fills that need white text */ --coral: #FF6B4A; /* secondary, decorative only */ /* --- warm cream neutrals (default) --- * Canvas keyed to WhatsApp's scheme: one flat cream ground (#FCF5EB) carrying * a single brand color (our Lo Blue logo) the way WhatsApp carries green. */ --background: #FCF5EB; /* the exact cream swatch — the whole-site canvas */ --surface: #FCF5EB; /* same single WhatsApp cream — one flat tone, sections split by hairline borders */ --surface-raised: #FCF5EB; /* cards are cream too — defined by border + soft shadow, not white */ --border: #EAE0CE; --border-strong: #D8CBB3; --text-primary: #1A1A18; --text-secondary: #5A5A55; --text-tertiary: #8B8B84; --accent: var(--lo-blue); --accent-hover: var(--lo-blue-hover); --accent-pressed: var(--lo-blue-pressed); /* signature blue gradient — the stat-number sheen, reused as a site-wide motif. Kept in a deep→vivid range (no near-white end) so the sweep stays saturated and clearly visible on the cream canvas. */ --grad-blue: linear-gradient(120deg, #075E82 0%, #0E86B8 30%, #17A9DE 58%, #2FC2F7 88%, #12C6F5 100%); /* --- status --- */ --success: #1E9E6A; --warning: #D98A0B; --error: #DA3B3E; /* --- type --- */ --font-display: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* --- scale --- */ --text-h1: 3.5rem; --text-h2: 2.5rem; --text-h3: 1.75rem; --text-h4: 1.25rem; --text-body: 1rem; --text-small: 0.875rem; --text-caption: 0.75rem; --radius: 10px; } /* No OS-driven auto dark: the site is the warm cream canvas for everyone. * The dark palette stays available (dormant) via :root[data-theme="dark"] in style.css. */