/* ========================================================================== Sitehandle AI — Design System Tokens ========================================================================== Single source of truth for all visual design decisions. Every component CSS file references these tokens exclusively. Never use raw hex values, pixel sizes, or font names outside this file. ACF-driven tokens (--acf-*) are injected via wp_head inline styles. The var() fallbacks below ensure the theme works without ACF data. ========================================================================== */ :root { /* ----------------------------------------------------------------------- Brand Colors (fixed — these never change via ACF) ----------------------------------------------------------------------- */ --color-brand: #109E91; --color-brand-light: #13BFB0; --color-brand-dark: #0D7D73; --color-brand-glow: rgba(16, 158, 145, 0.15); --color-brand-subtle: rgba(16, 158, 145, 0.08); /* ----------------------------------------------------------------------- ACF-Driven Colors (injected at runtime, fallbacks here) ----------------------------------------------------------------------- */ --color-surface: var(--acf-surface, #FAF9F0); --color-surface-alt: var(--acf-surface-alt, #F0EEEA); --color-text: var(--acf-text, #141413); --color-text-muted: var(--acf-text-muted, #666666); --color-accent: var(--acf-accent, #109E91); /* ----------------------------------------------------------------------- Neutral Palette ----------------------------------------------------------------------- */ --color-near-black: #141413; --color-dark-gray: #444444; --color-medium-gray: #888888; --color-light-gray: #E5E7EB; --color-off-white: #F9FAFB; --color-white: #FFFFFF; /* ----------------------------------------------------------------------- Semantic Colors ----------------------------------------------------------------------- */ --color-success: #22C55E; --color-success-dark: #15803D; --color-success-subtle: rgba(34, 197, 94, 0.12); --color-warning: #F59E0B; --color-warning-dark: #B45309; --color-warning-subtle: rgba(245, 158, 11, 0.14); --color-error: #EF4444; --color-info: #3B82F6; /* ----------------------------------------------------------------------- Typography ----------------------------------------------------------------------- */ --font-heading: 'Figtree', sans-serif; --font-body: 'Figtree', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Fluid type scale — clamp(min, preferred, max) */ --text-hero: clamp(3rem, 2.4rem + 2.5vw, 5rem); --text-h1: clamp(2.5rem, 2rem + 2vw, 4rem); --text-h2: clamp(2rem, 1.6rem + 1.5vw, 3rem); --text-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); --text-h4: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); --text-body: 1.0625rem; --text-small: 0.875rem; --text-xs: 0.75rem; /* Tracking and leading */ --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.02em; --leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.75; /* ----------------------------------------------------------------------- Spacing Scale ----------------------------------------------------------------------- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-section: clamp(4rem, 3rem + 4vw, 8rem); --space-cta-above: 4rem; /* Layout constraints */ --container-max: 1200px; --chat-max-width: 700px; /* Header chrome height (logo 36px + 2 * --space-md padding ~= 68px, buffered to 88px to give anchor-jump landings breathing room). Used by .w1-page section scroll-margin-top so anchor links don't land under the sticky header. */ --header-height: 88px; /* ----------------------------------------------------------------------- Border Radius ----------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 9999px; /* ----------------------------------------------------------------------- Shadows (warm-tinted, never pure black) ----------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(20, 20, 19, 0.06), 0 1px 2px rgba(20, 20, 19, 0.04); --shadow-md: 0 4px 12px rgba(20, 20, 19, 0.08), 0 2px 4px rgba(20, 20, 19, 0.04); --shadow-lg: 0 12px 32px rgba(20, 20, 19, 0.1), 0 4px 8px rgba(20, 20, 19, 0.05); --shadow-xl: 0 20px 48px rgba(20, 20, 19, 0.12), 0 8px 16px rgba(20, 20, 19, 0.06); --shadow-input: 0 2px 8px rgba(20, 20, 19, 0.06), 0 0 0 1px rgba(20, 20, 19, 0.04); --shadow-input-focus: 0 2px 12px rgba(16, 158, 145, 0.12), 0 0 0 2px rgba(16, 158, 145, 0.2); /* ----------------------------------------------------------------------- Animation ----------------------------------------------------------------------- */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; /* ----------------------------------------------------------------------- Z-Index (4-tier elevation system) ----------------------------------------------------------------------- */ --z-ground: 0; --z-raised: 10; --z-elevated: 100; --z-overlay: 1000; /* ----------------------------------------------------------------------- Component Tokens - Differentiator Numerals (About page) ----------------------------------------------------------------------- */ --color-card-surface: #F5F2E6; /* warm cream-alt, replaces #FFFFFF cards */ --color-card-border: rgba(20, 20, 19, 0.08); --color-divider-warm: rgba(20, 20, 19, 0.12); --color-numeral-teal: var(--color-brand); /* ----------------------------------------------------------------------- Component Tokens - Footer (warm charcoal family) ----------------------------------------------------------------------- Warm near-black with brown undertone. Fixes the "cold SaaS dark footer" flag — retains contrast but adds editorial warmth. All tokens below reference this palette so no raw rgba values leak into footer.css. ----------------------------------------------------------------------- */ --color-footer-bg: #1E1A13; --color-footer-bg-gradient-top: #26201A; --color-footer-body: #F3EFE2; /* warm cream for primary text */ --color-footer-heading: rgba(243, 239, 226, 0.70); --color-footer-link: rgba(243, 239, 226, 0.88); --color-footer-link-hover: var(--color-brand-light); --color-footer-tagline: rgba(243, 239, 226, 0.66); --color-footer-hairline: rgba(243, 239, 226, 0.10); --color-footer-copyright: rgba(243, 239, 226, 0.55); --color-footer-meta: rgba(243, 239, 226, 0.50); --shadow-footer-chat: 0 4px 14px rgba(16, 158, 145, 0.34); --shadow-footer-chat-hover: 0 10px 24px rgba(16, 158, 145, 0.46); }