/* ========================================================= c3.lt — colors & type tokens Dark-first. Mono-forward. Single accent. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ---------- COLORS ---------- */ /* Ink — dark surfaces (default mode) */ --ink-900: #0B0C0A; /* page bg */ --ink-800: #131512; /* surface 1 — cards */ --ink-700: #1B1D1A; /* surface 2 — raised */ --ink-600: #262924; /* surface 3 — hover */ --ink-500: #3A3D38; /* divider strong */ --ink-400: #5C5F58; /* fg quiet */ --ink-300: #8B8E86; /* fg muted */ --ink-200: #BDBFB7; /* fg secondary */ --ink-100: #E8E9E3; /* fg primary on dark */ /* Bone — light surfaces */ --bone-50: #FBFAF6; /* page bg light */ --bone-100: #F4F2EC; /* surface 1 light */ --bone-200: #E8E5DC; /* divider light */ --bone-300: #C8C4B6; --bone-900: #16170F; /* fg primary on light */ /* Accents */ --lime-500: #C6F94E; /* primary accent — go / shipped / live */ --lime-600: #A8E022; /* hover */ --lime-300: #E1FBA0; /* tints */ --cyan-400: #7DD3FC; /* analytics / data */ --magenta-400: #F472B6; /* destructive / spike */ --amber-400: #FBBF24; /* warning / lifetime */ /* Semantic — backgrounds */ /* DEFAULT IS LIGHT — see note below. The c3.lt design system is dark-first per its README, but every pre-existing landing page (features.astro, status.astro, the bio pages) has hardcoded styling that assumes a light background. To avoid breaking them when this token sheet is loaded globally from Base.astro, the :root defaults are LIGHT and dark mode is opt-in via [data-theme='dark'] (overrides at the bottom of this file). Pages redesigned to the dark-first marketing kit pass theme="dark" to Base.astro to get the attribute on . */ --bg-page: var(--bone-50); --bg-1: var(--bone-100); /* card */ --bg-2: #FFFFFF; /* raised */ --bg-3: var(--bone-200); /* hover surface */ --bg-overlay: rgba(20, 20, 14, 0.4); /* Semantic — foreground */ --fg-1: var(--bone-900); /* primary */ --fg-2: #2C2D24; /* secondary */ --fg-3: #5A5C50; /* muted */ --fg-4: #8A8C7E; /* quiet */ --fg-on-accent: var(--ink-900); /* Semantic — borders */ --border-1: rgba(20, 20, 14, 0.08); --border-2: rgba(20, 20, 14, 0.16); --border-strong: rgba(20, 20, 14, 0.32); /* Accent semantic — light-mode values. #C6F94E (lime-500) is the brand neon, but it has terrible contrast against cream/white. On light surfaces we use a deeper olive-lime (~ tailwind lime-700) that hits AAA against bone-50 for both fill and text. The flat `--accent-fg` on cream is light bone, since the deeper green button needs light text to pop. The dark-mode block at the bottom of this file restores the neon lime for the same tokens. */ --accent: #4D7C0F; --accent-hover: #3F6212; --accent-tint: rgba(101, 163, 13, 0.12); --accent-fg: var(--bone-50); /* Status */ --success: var(--lime-500); --info: var(--cyan-400); --warn: var(--amber-400); --danger: var(--magenta-400); /* ---------- TYPE ---------- */ --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-display: var(--font-mono); /* Scale */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-base: 0.9375rem; /* 15 — slightly under 16 for density */ --text-md: 1.0625rem; /* 17 */ --text-lg: 1.375rem; /* 22 */ --text-xl: 1.75rem; /* 28 */ --text-2xl: 2.25rem; /* 36 */ --text-display: 3.5rem; /* 56 */ --text-display-lg: 5rem; /* 80 */ --text-display-xl: 7.5rem; /* 120 */ /* Tracking */ --track-display: -0.04em; --track-tight: -0.02em; --track-normal: -0.01em; --track-loose: 0.04em; --track-caps: 0.12em; /* Leading */ --lead-display: 0.95; --lead-tight: 1.15; --lead-snug: 1.35; --lead-body: 1.55; /* ---------- SPACING (8px base) ---------- */ --space-0: 0; --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-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-12: 5rem; /* 80 */ --space-16: 6rem; /* 96 */ /* ---------- RADII ---------- */ --radius-sm: 4px; --radius-md: 8px; /* default */ --radius-lg: 12px; /* cards */ --radius-xl: 20px; /* hero / large containers */ --radius-pill: 999px; /* ---------- SHADOWS ---------- */ --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.32); --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.48); --inset-1: inset 0 0 0 1px var(--border-2); /* ---------- MOTION ---------- */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 480ms; /* ---------- LAYOUT ---------- */ --container-marketing: 1200px; --container-app: 1440px; --gutter-mobile: 24px; --gutter-desktop: 64px; } /* Dark mode (opt-in via — set by Base.astro when a page passes `theme="dark"` as a prop). The marketing site's redesigned hero / pricing pages use this; the legacy features.astro, status.astro, and the bio-page renderer keep the light defaults. */ [data-theme='dark'] { --bg-page: var(--ink-900); --bg-1: var(--ink-800); --bg-2: var(--ink-700); --bg-3: var(--ink-600); --fg-1: var(--ink-100); --fg-2: var(--ink-200); --fg-3: var(--ink-300); --fg-4: var(--ink-400); --border-1: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.16); --border-strong: rgba(255, 255, 255, 0.32); --bg-overlay: rgba(0, 0, 0, 0.6); --inset-1: inset 0 0 0 1px var(--border-2); --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.32); --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.48); /* On near-black ink, neon lime is the brand — restore the bright hue (lime-500) for the accent tokens so the dark hero / pricing pages keep their phosphor pop. The light-mode :root above used a deeper olive-lime for cream-bg readability. */ --accent: var(--lime-500); --accent-hover: var(--lime-600); --accent-tint: rgba(198, 249, 78, 0.12); --accent-fg: var(--ink-900); } /* ========================================================= BASE / SEMANTIC ELEMENTS ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lead-body); letter-spacing: var(--track-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--accent-fg); } /* Display / headings — mono */ h1, h2, h3, .h1, .h2, .h3, .display, .display-lg, .display-xl { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track-display); line-height: var(--lead-display); margin: 0; color: var(--fg-1); } .display-xl { font-size: var(--text-display-xl); font-weight: 500; } .display-lg { font-size: var(--text-display-lg); font-weight: 500; } .display { font-size: var(--text-display); font-weight: 500; } h1, .h1 { font-size: var(--text-2xl); letter-spacing: var(--track-tight); line-height: var(--lead-tight); } h2, .h2 { font-size: var(--text-xl); letter-spacing: var(--track-tight); line-height: var(--lead-tight); font-weight: 500; } h3, .h3 { font-size: var(--text-lg); letter-spacing: var(--track-tight); line-height: var(--lead-snug); font-weight: 500; } /* h4-h6 — sans, smaller */ h4, .h4 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; line-height: var(--lead-snug); letter-spacing: var(--track-normal); margin: 0; color: var(--fg-1); } p, .p { margin: 0; font-size: var(--text-base); line-height: var(--lead-body); color: var(--fg-2); text-wrap: pretty; } small, .small { font-size: var(--text-sm); color: var(--fg-3); } .caps { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-3); } .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); } code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.95em; } code { background: var(--bg-2); padding: 0.125em 0.4em; border-radius: var(--radius-sm); border: 1px solid var(--border-1); color: var(--fg-1); } kbd { display: inline-block; font-size: 0.8em; padding: 0.1em 0.45em; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--bg-2); color: var(--fg-2); } a { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--border-2); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } a:hover { border-color: var(--accent); } hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--space-6) 0; } /* Tabular numerals everywhere by default — KPIs feel right */ .num, .price, .kpi { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Focus */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* ========================================================= BUTTONS Global so .btn classes work across pages — Astro scopes