/* ===================================================== VERSED STUDIO — Foundations Colors • Type • Spacing • Radii • Shadows • Motion ===================================================== */ /* --- Webfonts (self-hosted) --- */ @font-face { font-family: 'PP Neue Bit'; src: url('./fonts/ppneuebit-bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Mondwest'; src: url('./fonts/ppmondwest-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } /* --- Body + mono via Google Fonts (IBM Plex Mono is the working face; Inter / Space Mono are kept as legacy fallbacks for older components that hard-code them, and for the archived indigo snapshot.) --- */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); :root { /* ========================================= COLORS ========================================= */ /* Base — high contrast, paper-on-ink */ --bg: #FFFFFF; --bg-elev: #F8F8F8; /* subtle elevation / hover ground */ --paper: #F7F7F7; /* neutral paper, used in secondary surfaces */ --paper-edge: #E8E8E8; /* matching edge */ --ink: #121212; /* primary text */ --ink-soft: #2A2A2A; /* paper-ink */ --ink-raised: #1C1C1C; /* raised card surface on ink sections */ --ink-chrome: #0A0A0A; /* sunken chrome / title bars on ink */ /* Text hierarchy */ --fg-1: #121212; /* primary */ --fg-2: #7E7E7E; /* secondary, metadata */ --fg-3: #AAAAAA; /* muted, placeholders */ --fg-invert: #FFFFFF; /* Surfaces / borders */ --gray-100: #F8F8F8; --gray-200: #F2F2F2; --gray-300: #E3E3E3; --gray-400: #CCCCCC; --gray-500: #9A9A9A; --border: rgba(33, 33, 33, 0.12); --border-strong: rgba(33, 33, 33, 0.25); /* Accent — pure ink. The system is greyscale; --accent stays as a semantic token so component code that wants "the emphasis color" keeps working, but visually it now reads the same as --ink. */ --accent: #121212; --accent-hover: #2A2A2A; --accent-tint: rgba(18, 18, 18, 0.08); --accent-tint-strong: rgba(18, 18, 18, 0.18); /* Semantic */ --success: #1F8A5B; --warning: #C97A14; --danger: #C0392B; --info: var(--accent); /* Window chrome (mac traffic lights) */ --dot-close: #FF5F57; --dot-min: #FEBC2E; --dot-max: #28C840; /* ========================================= TYPOGRAPHY - Pixel display : PP Neue Bit (hero h1, pixel set-pieces) - Sub-display + body+ mono utility : IBM Plex Mono (section H2s, paragraphs, eyebrows, metadata, UI) - Paper serif : PP Mondwest (paper-letter set-pieces) Inter / Space Mono are retired from active use but stay in the fallback stack for archived snapshots + legacy components. ========================================= */ --font-display: 'PP Neue Bit', 'PP Mondwest', ui-monospace, monospace; --font-pixel: 'PP Neue Bit', monospace; --font-serif-pixel: 'PP Mondwest', 'PP Neue Bit', monospace; --font-mono: 'IBM Plex Mono', 'Space Mono', 'JetBrains Mono', ui-monospace, monospace; --font-body: 'IBM Plex Mono', 'Space Mono', 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; /* Scale (rem) */ --text-xs: 0.6875rem; /* 11px — labels/eyebrows */ --text-sm: 0.75rem; /* 12px — mono captions */ --text-base: 0.875rem; /* 14px — UI default */ --text-md: 1rem; /* 16px — body */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px — display */ --text-5xl: 3.5rem; /* 56px — hero */ /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* Line height */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.6; --lh-loose: 1.85; /* Letter-spacing — mono eyebrows are tracked */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; /* ========================================= SPACING (4px grid) ========================================= */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-8: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-12: 5rem; /* 80 */ --space-16: 8rem; /* 128 */ /* ========================================= LAYOUT ========================================= */ --container-narrow: 560px; --container-max: 680px; --container-wide: 960px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ========================================= SHADOWS - Web 1.0 inset shadows for raised buttons/chrome - Soft drops only on floating paper/cards ========================================= */ --shadow-inset-raised: inset -2px -2px 0 0 var(--gray-300); --shadow-inset-pressed: inset 2px 2px 0 0 var(--gray-300); --shadow-card: 0 1px 0 var(--border), 0 1px 2px rgba(0,0,0,0.04); --shadow-floating: 0 8px 32px rgba(0,0,0,0.10); --shadow-paper: 0 12px 32px -8px rgba(0,0,0,0.18), 0 24px 60px -20px rgba(0,0,0,0.12); --focus-ring: 0 0 0 2px var(--accent-tint); /* ========================================= MOTION ========================================= */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* ===================================================== SEMANTIC TYPE — drop-in classes (and tag defaults) ===================================================== */ html, body { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--lh-base); color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* PIXEL DISPLAY — used for hero headlines and the brand wordmark. Always set crisp pixel rendering. */ .h-pixel, h1.pixel, h2.pixel { font-family: var(--font-pixel); font-weight: var(--weight-bold); line-height: var(--lh-tight); letter-spacing: 0; font-smooth: never; -webkit-font-smoothing: none; } .h-hero { font-family: var(--font-pixel); font-size: var(--text-5xl); line-height: var(--lh-tight); font-smooth: never; -webkit-font-smoothing: none; } .h-display { font-family: var(--font-pixel); font-size: var(--text-4xl); line-height: var(--lh-tight); font-smooth: never; -webkit-font-smoothing: none; } .h-1 { font-family: var(--font-body); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } .h-2 { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--lh-snug); } .h-3 { font-family: var(--font-body); font-size: var(--text-xl); font-weight: var(--weight-semi); line-height: var(--lh-snug); } .h-4 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semi); } .eyebrow, .text-mono { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--fg-2); } .body-lg { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--lh-base); } .body { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--lh-base); } .body-sm { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg-2); } .caption { font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg-2); } .mono { font-family: var(--font-mono); font-size: var(--text-base); } .code { font-family: var(--font-mono); font-size: 0.85em; background: var(--gray-100); padding: 0.15em 0.4em; border-radius: var(--radius-xs); border: 1px solid var(--border); } .typewriter { font-family: var(--font-mono); font-size: 0.8125rem; line-height: var(--lh-loose); color: var(--ink-soft); } /* Selection */ ::selection { background: var(--accent); color: #fff; }