/* ========================================================================== CALIBER — Colors & Type Single source of truth for the design system. Token definitions match the production app (app/src/index.css in takhir-iota/caliber), with semantic element styles added for direct copy/paste into static prototypes. Usage: ... ========================================================================== */ /* --- WEBFONTS ------------------------------------------------------------- */ /* Brand fonts shipped with this kit: - Display serif: Fraunces (variable, opsz + wght + SOFT + WONK axes) - Body sans: IBM Plex Sans (variable, wdth + wght axes) These are the wired-in substitutes for the brief's preferred (paid) pairing of PP Editorial New / Reckless Neue + Söhne / GT America. Both are editorial-grade open-source families with enough character to escape the forbidden Inter/Manrope/Geist look. The serif's SOFT and WONK axes give each headline a touch of editorial wonk; opsz scales letterforms per size. */ @font-face { font-family: "Fraunces"; src: url("./fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("./fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("./fonts/IBMPlexSans-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("./fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 100 700; font-style: italic; font-display: swap; } /* --- TOKENS --------------------------------------------------------------- */ :root { /* ---- Color (HSL channels for shadcn compat) ---- */ --caliber-bg: 50 25% 97%; /* #FAFAF7 warm off-white */ --caliber-surface: 0 0% 100%; /* #FFFFFF elevated cards */ --caliber-muted: 42 20% 92%; /* #F1EEE7 sections, dividers */ --caliber-ink: 0 0% 10%; /* #1A1A1A near-black */ --caliber-ink-soft: 0 0% 29%; /* #4A4A4A body */ --caliber-ink-mute: 50 4% 54%; /* #8A8A85 captions */ --caliber-line: 40 18% 88%; /* #E5E2DC borders */ --caliber-accent: 152 24% 23%; /* #2D4A3E deep forest */ --caliber-accent-soft: 152 14% 43%; /* #5E7F70 hover */ --caliber-warm: 30 25% 44%; /* #8B7355 warm brown */ /* Functional */ --caliber-success: 138 25% 39%; /* #4A7C59 */ --caliber-warning: 16 55% 47%; /* #B85C38 */ --caliber-error: 0 53% 36%; /* #8B2C2C */ /* Convenience hex (use inline if HSL-channel pattern is awkward) */ --c-bg: #FAFAF7; --c-surface: #FFFFFF; --c-muted: #F1EEE7; --c-ink: #1A1A1A; --c-ink-soft: #4A4A4A; --c-ink-mute: #8A8A85; --c-line: #E5E2DC; --c-accent: #2D4A3E; --c-accent-soft:#5E7F70; --c-warm: #8B7355; /* ---- Typography ---- */ --font-serif: "Fraunces", "Iowan Old Style", "Charter", "Tiempos Text", "Georgia", "Times New Roman", serif; --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace; /* Type scale (desktop). Mobile clamps inline at element. */ --fs-hero: 64px; /* h1 hero, serif */ --fs-h2: 40px; --fs-h3: 24px; --fs-h4: 20px; --fs-lede: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-eyebrow: 11px; --lh-display: 1.05; --lh-heading: 1.2; --lh-body: 1.55; --lh-loose: 1.7; --tracking-display: -0.025em; /* serif headlines tighten */ --tracking-heading: -0.015em; --tracking-body: 0; --tracking-eyebrow: 0.18em; --tracking-wordmark: 0.15em; /* ---- Spacing scale (4pt grid) ---- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Radius (deliberately small — editorial, not friendly-SaaS) ---- */ --radius-sm: 2px; --radius: 4px; /* default for buttons, inputs */ --radius-md: 6px; /* cards */ --radius-lg: 8px; /* large media wells */ --radius-full: 999px; /* ---- Borders ---- */ --border-hair: 1px solid hsl(var(--caliber-line)); --border-rule: 2px solid hsl(var(--caliber-ink)); /* section-defining rule */ /* ---- Elevation (use sparingly — borders preferred) ---- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04); --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.06); --shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.08); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-hover: 150ms; --dur-modal: 250ms; --dur-page: 350ms; --dur-reveal: 700ms; /* ---- Layout ---- */ --content-max: 1180px; --content-narrow: 720px; --content-prose: 640px; } /* --- BASE ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: hsl(var(--caliber-bg)); color: hsl(var(--caliber-ink)); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: hsl(var(--caliber-accent)); color: #fff; } /* --- SEMANTIC TYPE -------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; /* never bold serifs */ color: hsl(var(--caliber-ink)); margin: 0 0 var(--space-4); text-wrap: balance; /* Fraunces editorial-soft tuning: gentle SOFT, mild WONK on display sizes */ font-variation-settings: "opsz" 60, "SOFT" 50, "WONK" 0; } .italic-serif, .pullquote { font-variation-settings: "opsz" 48, "SOFT" 80, "WONK" 1; } h1, .h1 { font-size: clamp(40px, 6vw, var(--fs-hero)); line-height: var(--lh-display); letter-spacing: var(--tracking-display); } h2, .h2 { font-size: clamp(28px, 4vw, var(--fs-h2)); line-height: 1.1; letter-spacing: -0.02em; } h3, .h3 { font-size: clamp(20px, 2.4vw, var(--fs-h3)); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } h4, .h4 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.01em; } p, .body { margin: 0 0 var(--space-4); color: hsl(var(--caliber-ink-soft)); text-wrap: pretty; } .lede { font-size: var(--fs-lede); line-height: 1.5; color: hsl(var(--caliber-ink-soft)); } .small { font-size: var(--fs-small); } .caption { font-size: var(--fs-caption); color: hsl(var(--caliber-ink-mute)); } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: hsl(var(--caliber-ink-mute)); margin: 0 0 var(--space-3); } .eyebrow--accent { color: hsl(var(--caliber-accent)); } .italic-serif { font-family: var(--font-serif); font-style: italic; color: hsl(var(--caliber-accent)); } .wordmark { font-family: var(--font-serif); font-weight: 400; letter-spacing: var(--tracking-wordmark); text-transform: uppercase; } /* Editorial pull-quote (used for founder quotes, member testimonials) */ .pullquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.35; letter-spacing: -0.015em; color: hsl(var(--caliber-ink)); margin: 0; } /* Tabular numbers — always on for prices, dosages, dates */ .tabular { font-variant-numeric: tabular-nums; } /* Compliance footnote — small, muted, generous line-height */ .legal { font-size: 11px; line-height: var(--lh-loose); color: hsl(var(--caliber-ink-mute)); } a { color: hsl(var(--caliber-accent)); text-decoration-thickness: 1px; text-underline-offset: 4px; } a:hover { color: hsl(var(--caliber-accent-soft)); } hr { border: 0; border-top: var(--border-hair); margin: var(--space-7) 0; }