/* -------------------------------------------------- */ /* Design tokens - Conetcom */ /* -------------------------------------------------- */ :root { /* Colors - dark theme (default) */ --bg: #0A0E14; --bg-elevated: #111823; --bg-subtle: #0D131C; --border: #1E2A3A; --border-strong: #2A3B50; --text: #E6EDF3; --text-muted: #8B98A9; --text-faint: #5C6B7F; --accent: #22D3EE; --accent-hover: #67E8F9; --accent-deep: #0891B2; --accent-soft: rgba(34, 211, 238, 0.1); --success: #34D399; --danger: #F87171; --overlay: rgba(10, 14, 20, 0.82); /* Typography */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --fs-hero: clamp(2.4rem, 5vw, 4.2rem); --fs-h2: clamp(1.8rem, 3.5vw, 2.8rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-h4: clamp(1.05rem, 1.4vw, 1.25rem); --fs-body: clamp(1rem, 1.1vw, 1.125rem); --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; /* Spacing & shape */ --space-section: clamp(4rem, 10vw, 8rem); --space-lg: clamp(2rem, 5vw, 3.5rem); --space-md: 1.5rem; --space-sm: 0.75rem; --radius: 14px; --radius-sm: 8px; --radius-pill: 999px; --maxw: 1200px; --maxw-narrow: 780px; --transition: 220ms cubic-bezier(.4,0,.2,1); --shadow-elevated: 0 20px 50px -20px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 0 1px var(--accent-soft), 0 0 24px -4px rgba(34, 211, 238, 0.35); } /* Optional light theme, toggled via [data-theme="light"] on */ :root[data-theme="light"] { --bg: #F7F9FB; --bg-elevated: #FFFFFF; --bg-subtle: #EEF2F6; --border: #DCE3EA; --border-strong: #C4CFDA; --text: #0F1720; --text-muted: #4B5A6B; --text-faint: #7A8898; --accent: #0891B2; --accent-hover: #0E7490; --accent-deep: #0891B2; --accent-soft: rgba(8, 145, 178, 0.08); --overlay: rgba(247, 249, 251, 0.86); --shadow-elevated: 0 20px 50px -20px rgba(15, 23, 32, 0.15); }