/* ============================================ LUCY LIU — COLORS & TYPE Design tokens for both base type + color styles and semantic CSS vars. ============================================ */ /* Fonts loaded via in each page's — not @import */ :root { /* ─── CORE BRAND COLORS ─── */ --void: #050710; /* deepest background */ --navy: #0A0F2A; /* surfaces */ --navy-mid: #141930; /* elevated surface */ --navy-light: #1E2640; /* hover surface */ --blue-100: #EBF3FF; --blue-200: #C8DEFF; --blue-300: #A0C8FF; /* primary accent (light) */ --blue-400: #72ADFF; /* primary accent */ --blue-500: #4A8FEF; /* primary accent (strong) */ --lavender: #C4B0FF; --lavender-light: #E8E0FF; --mist: #E2EEFF; --cloud: #F6FAFF; /* near-white text */ --fog: #F0F4FA; /* ─── SIGNATURE GRADIENTS ─── */ --aura: linear-gradient(135deg, #A0C8FF 0%, #C4B0FF 55%, #8EC4FF 100%); --aura-soft: linear-gradient(135deg, #A0C8FF 0%, #C4B0FF 100%); --aura-radial: radial-gradient(circle, rgba(160,200,255,0.22) 0%, rgba(196,176,255,0.12) 40%, transparent 70%); /* ─── SEMANTIC COLORS (dark mode primary) ─── */ --bg: var(--void); --surface: var(--navy); --surface-2: var(--navy-mid); --surface-3: var(--navy-light); --fg1: var(--cloud); /* primary text */ --fg2: rgba(235, 243, 255, 0.55); /* secondary text */ --fg3: rgba(160, 200, 255, 0.55); /* tertiary / labels */ --fg-accent: var(--blue-400); --fg-accent-dim: var(--blue-300); --border: rgba(160, 200, 255, 0.10); --border-strong: rgba(160, 200, 255, 0.20); --border-focus: var(--blue-400); --accent: var(--blue-400); --accent-dim: rgba(114, 173, 255, 0.10); --accent-on: var(--void); --do: var(--blue-400); --dont: #E8B4C0; /* ─── FONT STACKS ─── */ --font-display: 'Syne', 'Inter Tight', system-ui, sans-serif; /* display + wordmark */ --font-ui: 'Syne', 'Inter Tight', system-ui, sans-serif; /* labels, buttons, nav */ --font-body: 'DM Sans', system-ui, sans-serif; /* body copy */ --font-code: 'Space Mono', 'Courier New', monospace; /* mono accents */ /* ─── TYPE SCALE ─── */ --text-9xl: clamp(72px, 12vw, 140px); --text-8xl: clamp(64px, 10vw, 110px); --text-6xl: clamp(40px, 6vw, 64px); --text-4xl: clamp(28px, 4vw, 40px); --text-3xl: clamp(24px, 3vw, 32px); --text-2xl: clamp(20px, 2.5vw, 26px); --text-xl: 20px; --text-lg: 18px; --text-base: 16px; --text-sm: 14px; --text-xs: 12px; --text-2xs: 10px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; /* ─── TYPE WEIGHTS ─── */ --display-weight: 700; --display-tracking: 0; --label-tracking: 0.14em; --tracking-mono: 0.14em; --tracking-tight: 0; /* ─── SPACING ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ─── RADII ─── */ --radius-sm: 4px; /* inputs */ --radius-md: 8px; /* buttons */ --radius-lg: 12px; /* cards */ --radius-xl: 20px; /* sections */ --radius-2xl: 24px; /* hero blocks */ --radius-full: 999px; /* pills, tags */ /* ─── MOTION ─── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-page: 800ms; /* ─── LAYOUT ─── */ --max-width: 1100px; --nav-height: 64px; --section-gap: clamp(80px, 12vw, 140px); --gutter: clamp(20px, 5vw, 48px); } /* ============================================ SEMANTIC TEXT STYLES Use these as classes instead of re-declaring. ============================================ */ .h-display { font-family: var(--font-display); font-size: var(--text-9xl); font-weight: var(--display-weight); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); } .h-display em { font-style: italic; color: var(--blue-300); } .h1 { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--display-weight); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); } .h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--display-weight); line-height: var(--lh-snug); color: var(--fg1); } .h3 { font-family: var(--font-ui); font-size: var(--text-2xl); font-weight: 600; line-height: var(--lh-snug); color: var(--fg1); } .body-lg { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 300; line-height: var(--lh-relaxed); color: var(--fg2); } .body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--lh-relaxed); color: var(--fg2); } .body-sm { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; line-height: var(--lh-normal); color: var(--fg2); } /* Editorial italic */ .italic-accent { font-family: var(--font-display); font-style: italic; color: var(--blue-300); } /* Eyebrow / section label — mono, uppercase, spaced */ .eyebrow, .label { font-family: var(--font-code); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--fg3); } /* Inline code / mono accent */ .mono { font-family: var(--font-code); font-size: var(--text-sm); color: var(--blue-400); } /* ============================================ ELEMENT DEFAULTS (opt-in via ) ============================================ */ .lucy-typography { font-family: var(--font-body); color: var(--fg1); background: var(--bg); } .lucy-typography h1 { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--display-weight); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .lucy-typography h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--display-weight); line-height: var(--lh-snug); } .lucy-typography h3 { font-family: var(--font-ui); font-size: var(--text-2xl); font-weight: 600; line-height: var(--lh-snug); } .lucy-typography h4 { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: 600; } .lucy-typography p { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--lh-relaxed); color: var(--fg2); } .lucy-typography code, .lucy-typography kbd, .lucy-typography pre { font-family: var(--font-code); } .lucy-typography em { font-style: italic; font-family: var(--font-display); }