/* ============================================================ DESIGN TOKENS All CSS custom properties for the Ashley Xie portfolio site. Load this file before styles.css and case-study.css. ============================================================ */ :root { /* ---------------------------------------------------------- COLORS — Brand palette ---------------------------------------------------------- */ --color-bg: #FCFEF9; /* Page / nav background */ --color-off-white: #F9FAFC; /* Subtle surface, stat cards, placeholders */ --color-light-blue: #E3E9F9; /* Accent tint, button hover fill */ --color-accent: #274CAB; /* Primary accent (buttons, links, borders) */ --color-accent-dark: #1c3a87; /* Hover state for accent */ --color-green: #5a7a1a; /* Success / green tag text */ --color-red: #BF3E3E; /* Error / red tag text */ --color-text: #0D0D0D; /* Primary body text */ --color-text-muted: #4F6080; /* Secondary / muted text */ --color-border: #E8ECF2; /* Default border / divider */ /* ---------------------------------------------------------- COLORS — Extended / one-off values ---------------------------------------------------------- */ --color-white: #ffffff; /* Pure white (cards, meta items) */ --color-black: #000000; /* Nav logo, hero statement text */ --color-tag-border: #EEF0EB; /* Default tag border */ --color-tag-green-bg: #EAF4D4; /* Green tag background */ --color-tag-red-bg: #FAEDED; /* Red tag background */ --color-thumb-bg: #ebebeb; /* Mini-card thumbnail background */ --color-warm: #FAF3E9; /* Tan / warm container background */ --color-border-dark: #D0D5DD; /* Stronger border (cs-step-img-box--wide-flex) */ --color-placeholder: #999999; /* Placeholder label text */ --color-hl-green: #76980F; /* Highlighted keyword — green */ /* ---------------------------------------------------------- COLORS — Semantic transparent values ---------------------------------------------------------- */ --color-nav-bg: rgba(252, 254, 249, 0.92); /* Nav backdrop (--color-bg @ 92%) */ --color-shadow-accent: rgba(39, 76, 171, 0.25); /* Accent button shadow */ --color-shadow-xs: rgba(0, 0, 0, 0.02); /* Hairline box shadow */ --color-shadow-sm: rgba(0, 0, 0, 0.06); /* Card/nav-item hover shadow */ --color-shadow-md: rgba(0, 0, 0, 0.08); /* Mobile nav drop shadow */ /* ---------------------------------------------------------- TYPOGRAPHY — Font families ---------------------------------------------------------- */ --font: 'Lexend', sans-serif; --font-serif: 'Instrument Serif', serif; /* ---------------------------------------------------------- TYPOGRAPHY — Type scale (all values are pixel-exact matches to existing usage) ---------------------------------------------------------- */ --text-2xs: 13px; /* cs-sidenav, nav label, placeholder text */ --text-xs: 12px; /* Tags, section-label, card arrow, scroll-hint */ --text-sm: 14px; /* Buttons, card desc (floor), mini-card btn, exp-role */ --text-base: 16px; /* Body, meta value, card desc (cap) */ --text-md: 18px; /* Hero aside/statement/sub, cs-section p, cs-list */ --text-lg: 22px; /* Projects heading, cs-section h3 */ --text-xl: 32px; /* Section title, cs-section h2, lennar/markspain h3 */ --text-2xl: 48px; /* Stat numbers, hero line1 */ --text-3xl: 72px; /* (reserved — declared in scale) */ --text-mini-title: 17px; /* Mini-card title */ --text-mini-desc: 15px; /* Mini-card description */ --text-serif-sm: 20px; /* Footer social link, footer link, footer sep */ --text-serif-md: 22px; /* Footer tagline/col-heading at narrow viewport */ --text-serif-lg: 26px; /* Nav logo, footer tagline, footer col-heading, footer links */ --text-serif-xl: 41px; /* About page label */ --text-serif-2xl: 48px; /* Hero line1 (same as --text-2xl, kept as alias) */ /* ---------------------------------------------------------- TYPOGRAPHY — Font weights ---------------------------------------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ---------------------------------------------------------- TYPOGRAPHY — Line heights ---------------------------------------------------------- */ --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.3; --leading-base: 1.4; --leading-relaxed: 1.65; --leading-loose: 1.7; --leading-looser: 1.8; /* ---------------------------------------------------------- TYPOGRAPHY — Letter spacing ---------------------------------------------------------- */ --tracking-tighter: -0.03em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.01em; --tracking-wider: 0.03em; --tracking-widest: 0.04em; --tracking-label: 0.05em; --tracking-caps: 0.06em; --tracking-caps-md: 0.08em; --tracking-caps-lg: 0.1em; /* ---------------------------------------------------------- SPACING — 4px-base scale ---------------------------------------------------------- */ --space-0: 2px; /* Hairline / very fine offset (footer social link underline bottom) */ --space-1: 4px; /* Fine detail padding/margin */ --space-1h: 6px; /* Nav toggle padding, tags gap, card__tags gap */ /* Underline offset: position underline decorators 3px below baseline */ --underline-offset: -3px; --space-2: 8px; /* --space-xs alias; toggle gap, tag padding-y */ --space-3: 12px; /* Margin-bottom, iter-phones gap */ --space-4: 14px; /* Button padding-y, loader gap */ --space-5: 16px; /* --space-sm alias; standard gaps, card body padding */ --space-5h: 18px; /* cs-cards grid gap */ --space-5q: 22px; /* cs-list li left padding (dash width) */ --space-6: 20px; /* Card body padding-top, cs-step-img padding */ --space-7: 24px; /* --space-md alias; container-px default */ --space-8: 28px; /* Button padding-x */ --space-9: 32px; /* Footer col margin, scroll-hint line width */ --space-10: 36px; /* Loader star size */ --space-11: 40px; /* Nav links gap, footer divider col margin, footer padding */ --space-12: 48px; /* --space-lg alias; hero layout gap */ --space-13: 56px; /* Hero star size, case-study container-px */ --space-14: 60px; /* cs-hero__split gap */ --space-15: 64px; /* Footer divider + col margin-left */ --space-16: 80px; /* About-split gap, --space-xl default */ --space-17: 84px; /* Projects grid row gap */ --space-18: 96px; /* --space-2xl at 768px */ --space-19: 120px; /* --space-2xl default */ --space-20: 160px; /* (reserved) */ /* Named aliases matching existing variable names */ --space-xs: var(--space-2); /* 8px */ --space-sm: var(--space-5); /* 16px */ --space-md: var(--space-7); /* 24px */ --space-lg: var(--space-12); /* 48px */ --space-xl: var(--space-16); /* 80px */ --space-2xl: var(--space-19); /* 120px */ /* ---------------------------------------------------------- BORDER — Widths ---------------------------------------------------------- */ --border-1: 1px; --border-2: 1.5px; --border-3: 2px; --border-4: 3px; /* ---------------------------------------------------------- BORDER — Radii ---------------------------------------------------------- */ --radius-2xs: 2px; /* Focus-visible border-radius, underline borders */ --radius-xs: 4px; /* Focus-visible border-radius */ --radius-sm: 8px; /* Small elements, mini-card btn, mini-card thumb mobile */ --radius-md: 16px; /* Standard cards, cs-img-frame, cs-step-img-box */ --radius-lg: 24px; /* Large containers, cs-cover, cs-gif-container */ --radius-xl: 10px; /* Mini-card thumb */ --radius-card: 12px; /* Card thumb, card focus-within */ --radius-pill: 100px; /* Buttons, tags */ /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container-max: 1440px; --container-px: 24px; --nav-h: 68px; /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --ease: 0.22s ease; /* Default micro-interaction */ --ease-fast: 0.2s ease; /* Toggle spans */ --ease-medium: 0.3s ease; /* Arrow rotate */ --ease-slow: 0.35s ease; /* Page loader fade */ --ease-slide: 0.38s ease; /* Slide-button color */ --ease-hover: 0.4s ease; /* Card thumbnail zoom */ --ease-cubic: cubic-bezier(0.4, 0, 0.2, 1); /* Slide-button fill */ --ease-slide-full: 0.38s cubic-bezier(0.4, 0, 0.2, 1); /* Slide-button fill combined */ /* ---------------------------------------------------------- EFFECTS ---------------------------------------------------------- */ --blur-nav: blur(16px); /* Nav backdrop-filter */ }