/* ============================================================ HONEYCOMB DESIGN TOKENS Brand anchors: Purple #5C2D6E · Teal #79D0D4 Direction: Structured Depth — dramatic enterprise SaaS ============================================================ */ :root { /* ---------------------------------------------------------- COLOR — BACKGROUNDS Layered dark system with purple undertone throughout ---------------------------------------------------------- */ --color-bg-base: #07050F; /* page background — deepest */ --color-bg-surface: #0F0C1E; /* cards, panels */ --color-bg-elevated: #181430; /* elevated surfaces, dropdowns */ --color-bg-overlay: #211C3E; /* modals, tooltips */ --color-bg-subtle: #2A2450; /* hover states on dark surfaces */ /* ---------------------------------------------------------- COLOR — BRAND Direct from logo; never alter these values ---------------------------------------------------------- */ --color-brand-purple: #5C2D6E; /* logo purple — primary */ --color-brand-purple-light: #8B52A0; /* hover / lighter variant */ --color-brand-purple-muted: #3A1C47; /* subtle backgrounds */ --color-brand-purple-glow: rgba(92, 45, 110, 0.35); --color-brand-teal: #79D0D4; /* logo teal — accent */ --color-brand-teal-light: #A8E4E7; /* light variant */ --color-brand-teal-dim: #2E7B80; /* darker teal for contrast */ --color-brand-teal-glow: rgba(121, 208, 212, 0.20); /* ---------------------------------------------------------- COLOR — TEXT ---------------------------------------------------------- */ --color-text-primary: #F0ECF8; /* headings, primary content */ --color-text-secondary: #AFA5C8; /* body copy, descriptions */ --color-text-tertiary: #6E6488; /* captions, metadata, hints */ --color-text-disabled: #3D3556; /* disabled states */ --color-text-inverse: #07050F; /* text on light backgrounds */ --color-text-accent: #79D0D4; /* teal-colored inline text */ --color-text-highlight: #C49FD8; /* purple mid-tone for emphasis */ /* ---------------------------------------------------------- COLOR — BORDERS ---------------------------------------------------------- */ --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-default: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.18); --color-border-accent: rgba(121, 208, 212, 0.25); --color-border-brand: rgba(92, 45, 110, 0.50); /* ---------------------------------------------------------- COLOR — SEMANTIC ---------------------------------------------------------- */ --color-success: #4ECBA0; --color-success-bg: rgba(78, 203, 160, 0.10); --color-warning: #F5C842; --color-warning-bg: rgba(245, 200, 66, 0.10); --color-error: #E05C7A; --color-error-bg: rgba(224, 92, 122, 0.10); --color-info: #79D0D4; --color-info-bg: rgba(121, 208, 212, 0.10); /* ---------------------------------------------------------- GRADIENTS ---------------------------------------------------------- */ --gradient-hero: linear-gradient(135deg, #07050F 0%, #150D28 50%, #0A1520 100%); --gradient-brand: linear-gradient(135deg, #5C2D6E 0%, #79D0D4 100%); --gradient-brand-text: linear-gradient(90deg, #C49FD8 0%, #79D0D4 100%); --gradient-purple: linear-gradient(180deg, #5C2D6E 0%, #3A1C47 100%); --gradient-surface: linear-gradient(180deg, #181430 0%, #0F0C1E 100%); --gradient-card-border: linear-gradient(135deg, rgba(121,208,212,0.2) 0%, rgba(92,45,110,0.2) 100%); --gradient-glow-teal: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(121,208,212,0.12) 0%, transparent 100%); --gradient-glow-purple: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(92,45,110,0.20) 0%, transparent 100%); /* ---------------------------------------------------------- TYPOGRAPHY — FAMILIES Syne: geometric, architectural display font (Google Fonts) Inter: industry-standard SaaS body font ---------------------------------------------------------- */ --font-display: 'Urbanist', 'DM Sans', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* ---------------------------------------------------------- TYPOGRAPHY — SCALE (Major Third · 1.25 ratio) ---------------------------------------------------------- */ --text-xs: 0.64rem; /* 10px */ --text-sm: 0.8rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.25rem; /* 20px */ --text-lg: 1.563rem; /* 25px */ --text-xl: 1.953rem; /* 31px */ --text-2xl: 2.441rem; /* 39px */ --text-3xl: 3.052rem; /* 49px */ --text-4xl: 3.815rem; /* 61px */ --text-5xl: 4.768rem; /* 76px */ /* ---------------------------------------------------------- TYPOGRAPHY — WEIGHTS & LEADING ---------------------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.03em; --tracking-snug: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.15em; /* ---------------------------------------------------------- SPACING (8pt grid) ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px — tags, badges */ --radius-md: 0.5rem; /* 8px — buttons, inputs */ --radius-lg: 0.75rem; /* 12px — cards */ --radius-xl: 1rem; /* 16px — large cards */ --radius-2xl: 1.5rem; /* 24px — feature panels */ --radius-full: 9999px; /* pills */ /* ---------------------------------------------------------- SHADOWS ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-xl: 0 16px 64px rgba(0,0,0,0.7); --shadow-brand: 0 8px 40px rgba(92, 45, 110, 0.40); --shadow-teal: 0 8px 40px rgba(121, 208, 212, 0.20); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06); /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --ease-default: cubic-bezier(0.16, 1, 0.3, 1); /* expo out — snappy */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 350ms; --duration-slower: 600ms; /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --nav-height: 4.5rem; /* 72px */ --section-gap: var(--space-32); }