/* ============================================================================ RoundCircle Design System — colors_and_type.css The single source of truth for color + type tokens. Light theme (default) blends "Halo" softness with "Atlas" editorial structure. Dark theme is the "Lumen" luminous-violet take. Toggle with (or on any subtree). Fonts: Plus Jakarta Sans (display+body) + JetBrains Mono (labels/data). NOTE: fonts are loaded from Google Fonts (see @import). These are substitutes pending a real brand font file. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---- Font families ------------------------------------------------------ */ --rc-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --rc-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --rc-font-display: var(--rc-font-sans); /* ---- Brand violet scale (primary) -------------------------------------- */ --rc-violet-50: #F5F1FF; --rc-violet-100: #EDE6FF; /* lilac wash */ --rc-violet-200: #DCCFFF; /* lilac line */ --rc-violet-300: #C2A8FF; --rc-violet-400: #9A6BFF; /* glow violet (dark theme accent) */ --rc-violet-500: #7C4DFF; /* violet — primary accent */ --rc-violet-600: #6D28D9; /* grape — primary action */ --rc-violet-700: #5B2EB8; --rc-violet-800: #46237A; /* plum */ --rc-violet-900: #2E1556; /* ---- Warm human accent (coral / peach) --------------------------------- */ --rc-coral-100: #FFE7DC; --rc-coral-300: #FFB4A2; --rc-coral-400: #FF8A5B; /* peach — primary warm accent */ --rc-coral-500: #FF7043; --rc-coral-600: #E8915B; /* amber (editorial underline) */ /* ---- Warm neutrals (clay / paper) -------------------------------------- */ --rc-paper: #FBF8F4; --rc-paper-2: #F4EEE6; /* sunken warm paper */ --rc-clay-100:#EFE7DB; --rc-clay-200:#E7DDCF; /* hairline */ --rc-clay-300:#D9C7B2; /* ---- Ink ---------------------------------------------------------------- */ --rc-ink-900: #1A1421; /* near-black aubergine */ --rc-ink-700: #3A3346; --rc-ink-500: #6B6276; /* muted */ --rc-ink-400: #948BA3; /* subtle */ --rc-white: #FFFFFF; /* ---- Semantic status ---------------------------------------------------- */ --rc-success: #1F9D6B; --rc-success-bg: #E3F5EC; --rc-warning: #E8915B; --rc-warning-bg: #FCEEE2; --rc-danger: #E5484D; --rc-danger-bg: #FCEAEA; --rc-info: var(--rc-violet-600); /* ---- Radii -------------------------------------------------------------- */ --rc-r-xs: 6px; --rc-r-sm: 8px; --rc-r-md: 12px; --rc-r-lg: 18px; --rc-r-xl: 24px; --rc-r-2xl: 32px; --rc-r-pill: 999px; /* ---- Spacing scale (4px base) ------------------------------------------ */ --rc-sp-1: 4px; --rc-sp-2: 8px; --rc-sp-3: 12px; --rc-sp-4: 16px; --rc-sp-5: 20px; --rc-sp-6: 24px; --rc-sp-8: 32px; --rc-sp-10: 40px; --rc-sp-12: 48px; --rc-sp-16: 64px; --rc-sp-20: 80px; --rc-sp-24: 96px; --rc-sp-32: 128px; /* ---- Type scale --------------------------------------------------------- */ --rc-text-display: 72px; --rc-text-h1: 56px; --rc-text-h2: 40px; --rc-text-h3: 28px; --rc-text-h4: 20px; --rc-text-body-lg: 19px; --rc-text-body: 16px; --rc-text-sm: 14px; --rc-text-caption: 13px; --rc-text-label: 12.5px; /* ====================================================================== SEMANTIC TOKENS — light theme (default) Use THESE in components, not the raw scales above. ====================================================================== */ --rc-bg: var(--rc-paper); /* page background */ --rc-bg-sunken: var(--rc-paper-2); /* sections, wells */ --rc-surface: var(--rc-white); /* cards */ --rc-surface-2: var(--rc-paper); /* nested surface */ --rc-border: var(--rc-clay-200); /* hairlines */ --rc-border-strong: var(--rc-clay-300); --rc-border-accent: var(--rc-violet-200); --rc-fg: var(--rc-ink-900); /* primary text */ --rc-fg-muted: var(--rc-ink-500); /* secondary text */ --rc-fg-subtle: var(--rc-ink-400); /* tertiary text */ --rc-fg-onbrand:#FFFFFF; --rc-brand: var(--rc-violet-600); --rc-brand-hover: var(--rc-violet-700); --rc-brand-press: var(--rc-violet-800); --rc-brand-soft: var(--rc-violet-100); --rc-brand-soft-fg:var(--rc-violet-700); --rc-accent: var(--rc-coral-400); --rc-accent-soft: var(--rc-coral-100); --rc-ring: 0 0 0 4px rgba(124,77,255,0.28); /* ---- Elevation (light) -------------------------------------------------- */ --rc-shadow-xs: 0 1px 2px rgba(40,20,80,0.06); --rc-shadow-sm: 0 4px 12px rgba(40,20,80,0.08); --rc-shadow-md: 0 10px 30px rgba(40,20,80,0.10); --rc-shadow-lg: 0 24px 60px rgba(40,20,80,0.14); --rc-glow: 0 14px 40px rgba(124,77,255,0.35); /* ---- Signature gradients ------------------------------------------------ */ --rc-grad-brand: linear-gradient(120deg, var(--rc-violet-600), var(--rc-violet-500)); --rc-grad-aurora: radial-gradient(60% 60% at 80% 0%, rgba(124,77,255,0.18), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(255,138,91,0.14), transparent 70%); --rc-grad-text: linear-gradient(100deg, var(--rc-violet-700), var(--rc-violet-500) 55%, var(--rc-coral-400)); } /* ========================================================================== DARK THEME — "Lumen" ========================================================================== */ [data-theme="dark"] { --rc-bg: #140C20; --rc-bg-sunken: #100819; --rc-surface: #1E1430; --rc-surface-2: #271A3D; --rc-border: #36284F; --rc-border-strong: #483763; --rc-border-accent: #5a4488; --rc-fg: #F4EFFB; --rc-fg-muted: #A99CC4; --rc-fg-subtle: #7C719A; --rc-fg-onbrand:#FFFFFF; --rc-brand: var(--rc-violet-500); --rc-brand-hover: var(--rc-violet-400); --rc-brand-press: var(--rc-violet-300); --rc-brand-soft: rgba(154,107,255,0.16); --rc-brand-soft-fg:var(--rc-violet-300); --rc-accent: var(--rc-coral-300); --rc-accent-soft: rgba(255,138,91,0.16); --rc-shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --rc-shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --rc-shadow-md: 0 14px 36px rgba(0,0,0,0.5); --rc-shadow-lg: 0 28px 70px rgba(0,0,0,0.6); --rc-glow: 0 0 40px rgba(154,107,255,0.45); --rc-grad-brand: linear-gradient(120deg, var(--rc-violet-500), var(--rc-violet-400)); --rc-grad-aurora: radial-gradient(55% 55% at 70% 0%, rgba(124,77,255,0.33), transparent 65%), radial-gradient(50% 50% at 0% 100%, rgba(255,138,107,0.18), transparent 65%); --rc-grad-text: linear-gradient(100deg, var(--rc-violet-300), var(--rc-violet-400) 50%, var(--rc-coral-300)); } /* ========================================================================== SEMANTIC TYPE CLASSES — apply on top of the tokens ========================================================================== */ .rc-display { font-family: var(--rc-font-display); font-size: var(--rc-text-display); line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; color: var(--rc-fg); } .rc-h1 { font-family: var(--rc-font-display); font-size: var(--rc-text-h1); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; color: var(--rc-fg); } .rc-h2 { font-family: var(--rc-font-display); font-size: var(--rc-text-h2); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; color: var(--rc-fg); } .rc-h3 { font-family: var(--rc-font-display); font-size: var(--rc-text-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: var(--rc-fg); } .rc-h4 { font-family: var(--rc-font-display); font-size: var(--rc-text-h4); line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; color: var(--rc-fg); } .rc-body-lg { font-family: var(--rc-font-sans); font-size: var(--rc-text-body-lg); line-height: 1.5; font-weight: 500; color: var(--rc-fg-muted); } .rc-body { font-family: var(--rc-font-sans); font-size: var(--rc-text-body); line-height: 1.6; font-weight: 400; color: var(--rc-fg-muted); } .rc-sm { font-family: var(--rc-font-sans); font-size: var(--rc-text-sm); line-height: 1.5; font-weight: 500; color: var(--rc-fg-muted); } .rc-caption { font-family: var(--rc-font-sans); font-size: var(--rc-text-caption); line-height: 1.4; font-weight: 500; color: var(--rc-fg-subtle); } /* Editorial eyebrow / label — the "engineered" mono detail */ .rc-eyebrow { font-family: var(--rc-font-mono); font-size: var(--rc-text-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rc-brand); } .rc-mono { font-family: var(--rc-font-mono); font-size: var(--rc-text-sm); font-weight: 500; } /* ========================================================================== GLOBAL LAYOUT & RESPONSIVENESS CONTAINMENT ========================================================================== */ html, body { max-width: 100%; overflow-x: hidden; } @media (max-width: 900px) { .rc-hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 64px 40px !important; } }