/** * WattKarma Design Tokens * * Single source of truth for all design values. * Load this FIRST in every page's , before any other stylesheet. * * Canonical Breakpoints (documented here — CSS can't use vars in @media): * sm: 640px — Mobile landscape * md: 768px — Tablet * lg: 1024px — Desktop * xl: 1280px — Wide desktop * * All media queries site-wide should use ONLY these four values, * mobile-first (min-width) exclusively. */ :root { /* ======================================================================= COLORS — Brand ======================================================================= */ --wk-blue-400: #3b82f6; /* Lighter blue accent */ --wk-blue-500: #2563eb; /* Primary — buttons, links, accents */ --wk-blue-600: #1d4ed8; /* Hover state */ --wk-blue-700: #1e40af; /* Active / pressed */ --wk-blue-800: #1756e8; /* Electric variant */ --wk-blue-900: #0f1f3d; /* Charcoal — headings, dark text */ --wk-blue-950: #0a1628; /* Deep navy — dark backgrounds */ /* Legacy aliases — keep in sync with above for backward compat */ --wk-blue-primary: var(--wk-blue-500); --wk-blue-dark: var(--wk-blue-600); --wk-blue-electric: var(--wk-blue-800); --wk-blue-navy: #0d35b0; --wk-blue-deep: var(--wk-blue-950); --wk-blue-slate: #263d88; /* ======================================================================= COLORS — Neutrals ======================================================================= */ --wk-cream: #faf8f4; /* Brand sand — page backgrounds */ --wk-cream-dark: #f4efe5; /* Darker sand variant */ --wk-gray-50: #f9fafb; --wk-gray-100: #f3f4f6; /* Light section backgrounds */ --wk-gray-200: #e5e7eb; /* Borders, dividers */ --wk-gray-300: #d1d5db; /* Muted borders */ --wk-gray-400: #9ca3af; --wk-gray-500: #6b7280; /* Muted text */ --wk-gray-600: #4b5563; /* Body text */ --wk-gray-700: #374151; --wk-gray-800: #1f2937; --wk-gray-900: #111827; /* Near-black text */ --wk-slate-900: #0f172a; /* Near-black slate — supplier text */ --wk-near-black: #101827; /* Footer bg, blog headings */ --wk-white: #ffffff; /* Product page CTA backgrounds — brand-aligned */ --wk-navy-800: var(--wk-blue-900); /* Pay As You Go / FNW / Usage Credit CTA bg — brand charcoal #0f1f3d */ --wk-emerald-800: #047857; /* Go Green CTA bg — brand dark green (matches signup success state) */ /* Legacy aliases */ --wk-bg-cream: var(--wk-cream); --wk-bg-page-sand: var(--wk-cream-dark); --wk-bg-light: #f0f4f8; --wk-bg-section-gray: #f0f2f5; /* Gray section backgrounds */ --wk-bg-slate-50: #f1f5f9; /* Slate 50 background */ --wk-bg-white: var(--wk-white); --wk-bg-dark: var(--wk-blue-900); --wk-charcoal: var(--wk-blue-900); /* ======================================================================= COLORS — Text ======================================================================= */ --wk-text-dark: var(--wk-blue-900); /* Headings */ --wk-text-body: #4b5a74; /* Body copy */ --wk-text-muted: #6b7a99; /* Secondary text */ --wk-text-light: #8a9ab8; /* Tertiary / hints */ --wk-text-slate: #64748b; /* Slate muted text */ --wk-text-charcoal: #0a1023; /* Trust bar nums, FAQ buttons */ --wk-text-ink: #03070c; /* Mega-menu text */ /* ======================================================================= COLORS — Accents ======================================================================= */ --wk-green-500: #22c55e; --wk-green-600: #16a34a; --wk-green-badge: #44b75e; --wk-red-500: #ef4444; --wk-red-600: #dc2626; --wk-orange-500: #f59e0b; --wk-yellow: #FACD18; /* Legacy aliases */ --wk-green: var(--wk-green-500); --wk-green-dark: var(--wk-green-600); /* ======================================================================= COLORS — Borders ======================================================================= */ --wk-border-light: #d1dae8; --wk-border-blue: #d6e0ff; --wk-border-subtle: #eef0f5; --wk-border-section: #e5eaf4; /* Section borders — trust bar, FAQ, cards */ --wk-border-slate: #e2e8f0; /* Input/card borders */ /* ======================================================================= COLORS — Section Backgrounds (semantic) ======================================================================= */ --wk-section-cream: var(--wk-cream); --wk-section-cream-glow-start: #e8f0ff; --wk-section-cream-glow-end: var(--wk-cream); --wk-section-gray: var(--wk-gray-100); --wk-section-white: var(--wk-white); /* ======================================================================= TYPOGRAPHY ======================================================================= */ --wk-font-display: 'Outfit', system-ui, sans-serif; --wk-font-body: 'Inter', system-ui, sans-serif; /* Type Scale */ --wk-text-xs: 12px; --wk-text-sm: 14px; --wk-text-base: 16px; --wk-text-lg: 18px; --wk-text-xl: 20px; --wk-text-2xl: 24px; --wk-text-3xl: 30px; --wk-text-4xl: clamp(28px, 3.5vw, 36px); --wk-text-5xl: clamp(32px, 4vw, 42px); --wk-text-6xl: clamp(36px, 5vw, 52px); /* Line Heights */ --wk-leading-tight: 1.15; --wk-leading-snug: 1.3; --wk-leading-normal: 1.5; --wk-leading-relaxed: 1.65; /* Font Weights */ --wk-font-normal: 400; --wk-font-medium: 500; --wk-font-semibold: 600; --wk-font-bold: 700; /* ======================================================================= SPACING — 4px base grid ======================================================================= */ --wk-space-0: 0; --wk-space-px: 1px; --wk-space-0\.5: 2px; --wk-space-1: 4px; --wk-space-2: 8px; --wk-space-3: 12px; --wk-space-4: 16px; --wk-space-5: 20px; --wk-space-6: 24px; --wk-space-7: 28px; --wk-space-8: 32px; --wk-space-10: 40px; --wk-space-12: 48px; --wk-space-14: 56px; --wk-space-16: 64px; --wk-space-20: 80px; --wk-space-24: 96px; /* Section vertical padding — scales with viewport */ --wk-section-pad-y: clamp(48px, 6vw, 80px); /* Container max-widths */ --wk-inner-max: 720px; --wk-inner-wide-max: 960px; --wk-container-max: 1200px; /* ======================================================================= SHADOWS ======================================================================= */ --wk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --wk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --wk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --wk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --wk-shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.16); /* Brand shadows (blue-tinted) */ --wk-shadow-card: 0 4px 20px rgba(37, 99, 235, 0.10); --wk-shadow-hover: 0 20px 56px rgba(23, 86, 232, 0.28), 0 4px 12px rgba(0, 0, 0, 0.12); /* ======================================================================= BORDER RADIUS ======================================================================= */ --wk-radius-sm: 6px; --wk-radius-md: 10px; --wk-radius-lg: 16px; --wk-radius-xl: 24px; --wk-radius-full: 9999px; /* ======================================================================= TRANSITIONS ======================================================================= */ --wk-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --wk-duration-fast: 150ms; --wk-duration-normal: 250ms; --wk-duration-slow: 350ms; /* ======================================================================= ALPHA — repeated semi-transparent accent values ======================================================================= */ /* Green alpha — eyebrow badges, check icons */ --wk-green-a12: rgba(74, 222, 128, 0.12); --wk-green-a25: rgba(74, 222, 128, 0.25); /* Dark overlays — image/card backgrounds */ --wk-overlay-card: rgba(8, 18, 40, 0.68); --wk-overlay-section: rgba(8, 16, 38, 0.72); /* Blue alpha — focus rings, tinted shadows */ --wk-blue-a12: rgba(37, 99, 235, 0.12); }