/* ======================================== DESIGN TOKENS - VistaFly The single source of truth for color, type, space, elevation, and motion. Nothing in this file draws anything. Every other stylesheet consumes from here. ======================================== */ :root { /* ============================ GROUND — the dark substrate Stepped so surfaces can stack legibly instead of every panel being the same translucent grey. ============================ */ --ground-000: #060606; /* deepest — page base behind video */ --ground-100: #0B0B0B; /* solid section */ --ground-200: #111111; /* solid section, alternate */ --ground-300: #171717; /* raised card on solid */ --ground-400: #1F1F1F; /* raised card, hover */ --ground-500: #2A2A2A; /* borders on light-ish surfaces */ --ground-600: #383838; /* dividers */ /* ============================ BONE — the warm accent ============================ */ --bone-100: #FAF6EF; --bone-200: #F0E8DA; --bone-300: #E4D8C4; /* the brand tone */ --bone-400: #CFC0A8; --bone-500: #B3A48C; --bone-600: #8A7D69; /* ============================ SIGNAL — used sparingly. Live/broadcast state only. ============================ */ --signal-live: #FF4D4D; --signal-live-dim: rgba(255, 77, 77, 0.14); --signal-live-edge: rgba(255, 77, 77, 0.32); /* ============================ TEXT ============================ */ --text-hi: #FFFFFF; --text-mid: rgba(255, 255, 255, 0.72); --text-lo: rgba(255, 255, 255, 0.48); --text-faint: rgba(255, 255, 255, 0.30); --text-on-bone: #0B0B0B; /* ============================ LINES & EDGES ============================ */ --edge-faint: rgba(255, 255, 255, 0.06); --edge-soft: rgba(255, 255, 255, 0.10); --edge-firm: rgba(255, 255, 255, 0.16); --edge-bone: rgba(228, 216, 196, 0.24); --edge-bone-hot: rgba(228, 216, 196, 0.45); /* Translucent fills for glass surfaces */ --fill-01: rgba(255, 255, 255, 0.03); --fill-02: rgba(255, 255, 255, 0.05); --fill-03: rgba(255, 255, 255, 0.08); --fill-bone: rgba(228, 216, 196, 0.08); /* ============================ TYPEFACES Fraunces — display serif. Axes pinned to SOFT 0 / WONK 0 so it reads refined rather than quirky. Montserrat — body + UI. ============================ */ --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace; /* Fraunces variation defaults — refined, not novelty */ --display-axes: 'SOFT' 0, 'WONK' 0; /* ============================ TYPE SCALE — fluid ============================ */ --fs-micro: 0.6875rem; /* 11 — eyebrows, labels */ --fs-2xs: 0.75rem; /* 12 */ --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 0.9375rem; /* 15 — UI default */ --fs-body: 1rem; /* 16 — reading */ --fs-lg: clamp(1.0625rem, 0.30vw + 0.99rem, 1.1875rem); --fs-xl: clamp(1.1875rem, 0.60vw + 1.05rem, 1.4375rem); --fs-2xl: clamp(1.375rem, 1.10vw + 1.12rem, 1.875rem); --fs-3xl: clamp(1.625rem, 1.90vw + 1.18rem, 2.5rem); --fs-4xl: clamp(2rem, 3.20vw + 1.25rem, 3.5rem); --fs-5xl: clamp(2.5rem, 5.20vw + 1.28rem, 5rem); --fs-6xl: clamp(3rem, 7.50vw + 1.25rem, 6.5rem); /* ============================ TRACKING Tightens as size grows — the detail that separates set type from default type. ============================ */ --track-micro: 0.18em; --track-label: 0.12em; --track-wide: 0.04em; --track-normal: 0; --track-tight: -0.011em; --track-tighter: -0.021em; --track-display: -0.032em; /* ============================ LEADING ============================ */ --leading-flat: 1; --leading-tight: 1.12; --leading-snug: 1.28; --leading-body: 1.65; --leading-loose: 1.8; /* ============================ WEIGHT ============================ */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ============================ SPACE — 4px base ============================ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; /* ============================ LAYOUT ============================ */ --gutter: clamp(1.25rem, 5vw, 5rem); --container: 1180px; --container-wide: 1400px; --container-narrow: 820px; --measure: 64ch; --section-py: clamp(4rem, 7vw, 7rem); --section-py-lg: clamp(5rem, 10vw, 10rem); /* Original values — the logo crop and glass bar are tuned to these */ --nav-height: 80px; --nav-height-scrolled: 70px; /* ============================ RADII ============================ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; /* ============================ ELEVATION Dark UI: shadows read as depth only when paired with a light top edge. ============================ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38); --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.48); --shadow-xl: 0 32px 90px rgba(0, 0, 0, 0.60); --shadow-bone: 0 12px 40px rgba(228, 216, 196, 0.18); --inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* ============================ MOTION ============================ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-fast: 160ms; --dur-mid: 280ms; --dur-slow: 520ms; --dur-glacial: 900ms; /* ============================ LAYERS ============================ */ --z-video: -2; --z-scrim: -1; --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 1000; --z-modal: 9000; --z-skip: 10000; /* ============================ BACKDROP ============================ */ --blur-veil: blur(16px) saturate(140%); --blur-nav: blur(20px) saturate(180%); /* ======================================== LEGACY ALIASES Older stylesheets still reference these. Mapped forward so nothing breaks mid-migration. Remove once every file consumes tokens directly. ======================================== */ --dark: var(--ground-100); --dark-grey: var(--ground-200); --grey: var(--ground-300); --light-grey: var(--ground-400); --white: var(--text-hi); --black: #000000; --accent: var(--bone-300); --accent-light: var(--bone-200); --accent-dark: var(--bone-400); --accent-glow: rgba(228, 216, 196, 0.30); --text-primary: var(--text-hi); --text-secondary: var(--text-mid); --text-muted: var(--text-lo); } /* Denser vertical rhythm on small screens — the fluid clamps handle type, but stacked sections need help. */ @media (max-width: 640px) { :root { --section-py: clamp(3rem, 12vw, 4.5rem); --section-py-lg: clamp(3.5rem, 14vw, 5.5rem); } }