/* ============================================================= Manif.ai Design System — canonical tokens (single source of truth) Financial infra & control plane for agentic commerce. This file is GLOBAL-SAFE: it only declares CSS custom properties, @font-face rules, and `u-`/`ds-`-namespaced helpers. It never styles bare elements (h1, p, a…) so it can be imported app-wide without touching existing screens. New code should consume these tokens (var(--accent), var(--fg-muted), …) and the React primitives in ./components/ so the whole product adheres to one system. ============================================================= */ /* --- Webfonts --- Public Sans ships locally as a variable font (both upright + italic axes). JetBrains Mono loads from Google Fonts — vendor it into ./fonts/ and add a @font-face block if you need fully offline. NB: remote @import must precede all other rules to be honored. */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"); /* Served from public/fonts (absolute URL) — Tailwind v4's Lightning CSS pipeline doesn't rewrite url() inside nested @imports, so a bundled relative path silently fails to emit. Canonical copies also live in ./fonts/. */ /* WOFF2, and only WOFF2. The same variable font in a web container: 207KB of TTF became 86KB, a 59% cut, on the critical path — a browser cannot paint text in a webfont until the file lands. No TTF fallback, because there is nothing left to fall back for. Every browser that understands a variable font understands WOFF2; the pair have overlapped since 2018, so a build that shipped both would be sending a second copy to nobody. Converted with woff2_compress (brew install woff2), which is lossless — the axes, the name table and the outlines are the same bytes in a Brotli wrapper. woff2-variations first for older Safari, plain woff2 for everything else. */ @font-face { font-family: "Public Sans"; src: url("/fonts/PublicSans-VariableFont_wght.woff2") format("woff2-variations"), url("/fonts/PublicSans-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("/fonts/PublicSans-Italic-VariableFont_wght.woff2") format("woff2-variations"), url("/fonts/PublicSans-Italic-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ─── Brand palette (raw) — FINETUNE July: warmed toward AI Habitat ─ Accent is a warm terracotta; logo SVGs in public/ re-cut to match. */ --manif-orange: #C65A2E; /* Terracotta — accent / CTA / .ai / icon m */ --manif-orange-600: #B14C24; /* Hover state */ --manif-orange-700: #97401B; /* Press state */ --manif-orange-100: #F4DFD3; /* Warm tint (badges, hover wash) */ /* Warm slate ramp (less blue than before, matches AIH #1F2933) */ --grey-900: #161C23; /* Deepest warm slate */ --grey-800: #1F2933; /* Primary anchor / dark zone bg / wordmark */ --grey-700: #313A42; /* Dark borders / dividers */ --grey-600: #4A535B; /* Dark input borders */ --grey-500: #6B7178; /* Muted text */ --grey-400: #8C9096; /* Warm slate — light input borders */ --grey-300: #C3C1BA; /* Warm grey — light borders */ --grey-200: #E5E3DD; /* Warm silver — light card / surface */ --grey-100: #F4F3F0; /* Warm cream — light theme bg */ --grey-50: #FBFAF7; /* Warm near-white — card / input bg */ --grey-fg: #F4F4F2; /* Warm off-white — text on dark */ /* ─── Semantic — Light theme (default) ───────────────────── FINETUNE July: main body + cards are WHITE (cleaner, matches the docs surface); warmth is retained in borders, wells, and secondary surfaces. */ --bg: #FFFFFF; /* white page */ --bg-elevated: #FFFFFF; /* white card */ --surface: var(--grey-50); --surface-muted: #EEEDE8; --fg: var(--grey-800); /* warm slate text */ --fg-muted: #5B6168; --fg-subtle: #8C9096; --fg-on-accent: #FFFFFF; --accent: var(--manif-orange); --accent-hover: var(--manif-orange-600); --accent-press: var(--manif-orange-700); --accent-tint: var(--manif-orange-100); /* Translucent accent surface for SELECTED option cards / large washes. Unlike --accent-tint (opaque cream, pills only), this keeps body text readable on top in both themes. */ --accent-wash: rgba(198, 90, 46, 0.08); --link: var(--manif-orange); --border: var(--grey-200); /* warm, near-invisible */ --border-strong: var(--grey-300); --divider: #ECEAE4; --input-bg: var(--grey-50); --input-border: var(--grey-300); --focus-ring: rgba(198, 90, 46, 0.32); /* Status (subdued, "institutional" — not candy) */ --success: #1F7A4D; --success-tint: #E0F2E9; --warning: #B25E09; --warning-tint: #FCEBD2; --danger: #B42318; --danger-tint: #FDE8E6; --info: #1E5BB8; --info-tint: #E0EAF8; /* ─── Type — families ───────────────────────────────────── */ --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-display: var(--font-sans); /* FINETUNE: AI Habitat headlines are ExtraBold, not SemiBold */ --fw-display: 800; /* ─── Type — scale (1rem = 16px) ────────────────────────── */ --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 34px; --fs-4xl: 40px; --fs-5xl: 52px; /* rare marketing-hero ceiling */ /* (former --fs-6xl 80px / 64px removed — too large for this brand) */ /* ─── Type — weights ────────────────────────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ─── Type — line-height / tracking ─────────────────────── */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* ─── Spacing scale (4-pt) ──────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ─── Radii ─────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 22px; /* matches the icon-tile rx */ --radius-pill: 999px; /* ─── Shadows (cool grey, no purple tint) ───────────────── */ --shadow-xs: 0 1px 1px rgba(17, 24, 39, 0.04); --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04); --shadow-md: 0 4px 10px -2px rgba(17, 24, 39, 0.08), 0 2px 4px -2px rgba(17, 24, 39, 0.06); --shadow-lg: 0 16px 28px -8px rgba(17, 24, 39, 0.14), 0 6px 12px -6px rgba(17, 24, 39, 0.08); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ─── Motion ────────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; /* ─── Layout ────────────────────────────────────────────── */ --container-max: 1240px; --container-pad: clamp(20px, 4vw, 48px); --grid-gutter: 24px; } /* ─── Semantic — Light theme (explicit scope) ─────────────────── Mirrors the :root light defaults so a nested [data-theme="light"] (e.g. the marketing shell) forces light even when an ancestor is dark. */ [data-theme="light"] { --bg: #FFFFFF; /* white page */ --bg-elevated: #FFFFFF; /* white card */ --surface: var(--grey-50); --surface-muted: #EEEDE8; --fg: var(--grey-800); --fg-muted: #5B6168; --fg-subtle: #8C9096; --fg-on-accent: #FFFFFF; --border: var(--grey-200); --border-strong: var(--grey-300); --divider: #ECEAE4; --input-bg: var(--grey-50); --input-border: var(--grey-300); --focus-ring: rgba(198, 90, 46, 0.32); --accent-wash: rgba(198, 90, 46, 0.08); --success-tint: #E0F2E9; --warning-tint: #FCEBD2; --danger-tint: #FDE8E6; --info-tint: #E0EAF8; --shadow-xs: 0 1px 1px rgba(17, 24, 39, 0.04); --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04); --shadow-md: 0 4px 10px -2px rgba(17, 24, 39, 0.08), 0 2px 4px -2px rgba(17, 24, 39, 0.06); --shadow-lg: 0 16px 28px -8px rgba(17, 24, 39, 0.14), 0 6px 12px -6px rgba(17, 24, 39, 0.08); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* ─── Semantic — Dark theme ─────────────────────────────────── */ :root.dark, [data-theme="dark"] { /* Doubles as the FINETUNE "dark zone": apply data-theme="dark" to a
to flip just that band dark, AI-Habitat style. */ --bg: var(--grey-800); /* warm slate band */ --bg-elevated: #252F39; /* dark bordered tile */ --surface: #252F39; --surface-muted: var(--grey-900); --fg: var(--grey-fg); --fg-muted: #A8ADB2; --fg-subtle: #7E848A; --fg-on-accent: #FFFFFF; --border: var(--grey-700); --border-strong: #3E4751; --divider: #2A333C; --input-bg: var(--grey-900); --input-border: var(--grey-600); --focus-ring: rgba(198, 90, 46, 0.42); --accent-wash: rgba(198, 90, 46, 0.14); --success-tint: #0E2D1F; --warning-tint: #2B1B07; --danger-tint: #2B0F0C; --info-tint: #0E1F3A; --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 6px 14px -2px rgba(0, 0, 0, 0.50); --shadow-lg: 0 24px 40px -8px rgba(0, 0, 0, 0.55); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ============================================================= Namespaced helpers (opt-in — never style bare elements) ============================================================= */ .u-mono { font-family: var(--font-mono); } .u-sans { font-family: var(--font-sans); } .u-accent { color: var(--accent); } .u-muted { color: var(--fg-muted); } .u-subtle { color: var(--fg-subtle); } .u-surface { background: var(--surface); } .u-eyebrow { font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--accent); } .u-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* Tonal pill/chip helpers — the canonical status colors. Use these (or the / components) for every status chip so the palette stays the muted "institutional" design tones, never bright Tailwind candy colors. Theme-aware: tints swap automatically in dark mode. */ .tone-success { color: var(--success); background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 32%, transparent); } .tone-warning { color: var(--warning); background: var(--warning-tint); border-color: color-mix(in srgb, var(--warning) 32%, transparent); } .tone-danger { color: var(--danger); background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 32%, transparent); } .tone-info { color: var(--info); background: var(--info-tint); border-color: color-mix(in srgb, var(--info) 32%, transparent); } .tone-accent { color: var(--accent); background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 32%, transparent); } .tone-neutral { color: var(--fg-muted); background: var(--surface); border-color: var(--border); } .ds-banner-info { background: var(--info-tint); border-color: color-mix(in srgb, var(--info) 28%, transparent); } /* Single-purpose tone utilities — for icons, action links, and tinted wells that need just one channel of a tone (text, bg, or border). Pills should prefer .tone-* / ; these cover the long tail. */ .ds-text-success { color: var(--success); } .ds-text-warning { color: var(--warning); } .ds-text-danger { color: var(--danger); } .ds-text-info { color: var(--info); } .ds-bg-success-tint { background: var(--success-tint); } .ds-bg-warning-tint { background: var(--warning-tint); } .ds-bg-danger-tint { background: var(--danger-tint); } .ds-bg-info-tint { background: var(--info-tint); } .ds-border-success { border-color: color-mix(in srgb, var(--success) 32%, transparent); } .ds-border-warning { border-color: color-mix(in srgb, var(--warning) 32%, transparent); } .ds-border-danger { border-color: color-mix(in srgb, var(--danger) 32%, transparent); } .ds-border-info { border-color: color-mix(in srgb, var(--info) 32%, transparent); } .ds-hover-success-tint:hover { background: var(--success-tint); } .ds-hover-warning-tint:hover { background: var(--warning-tint); } .ds-hover-danger-tint:hover { background: var(--danger-tint); } .ds-hover-info-tint:hover { background: var(--info-tint); } /* `ds-prose` opts a subtree into the full element-default treatment from the brand brief — use it on marketing copy or docs blocks where you want the canonical heading/paragraph/link rhythm without the kit CSS. */ .ds-prose { color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); } .ds-prose h1 { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--fw-semibold); color: var(--fg); margin: 0 0 var(--space-5); } .ds-prose h2 { font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: var(--fw-semibold); margin: 0 0 var(--space-4); } .ds-prose h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); font-weight: var(--fw-semibold); margin: 0 0 var(--space-4); } .ds-prose p { margin: 0 0 var(--space-4); max-width: 68ch; } .ds-prose a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-standard); } .ds-prose a:hover { border-bottom-color: currentColor; } .ds-prose code { font-family: var(--font-mono); font-size: 0.92em; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 5px; }