/* ========================================================================= PEAK AGENTS — Design Tokens A sub-brand of Peak Product Group. Product: VCOS (agent stack + Obsidian second brain for emerging venture firms). Type package (new for Peak Agents): Display — Sentient (self-hosted brand serif that "pops") Body/UI — Hanken Grotesque (clean modern grotesque) Mono — JetBrains Mono (agentic / infra accent: code, paths, labels) Palette inherits Peak Product Group: Green #489D73 Sand #F1AF6E Slate ink #2E3A3E Cool light #DFE7ED plus a warm "taupe paper" neutral family borrowed from the Climatalyst feel. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesque:ital,wght@0,300..800;1,300..800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------- Self-hosted brand display serif: Sentient (uploaded web fonts) ---------- */ @font-face { font-family:'Sentient'; font-weight:200; font-style:normal; src:url('fonts/Sentient-Extralight.woff2') format('woff2'), url('fonts/Sentient-Extralight.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:200; font-style:italic; src:url('fonts/Sentient-ExtralightItalic.woff2') format('woff2'), url('fonts/Sentient-ExtralightItalic.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:300; font-style:normal; src:url('fonts/Sentient-Light.woff2') format('woff2'), url('fonts/Sentient-Light.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:300; font-style:italic; src:url('fonts/Sentient-LightItalic.woff2') format('woff2'), url('fonts/Sentient-LightItalic.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:400; font-style:normal; src:url('fonts/Sentient-Regular.woff2') format('woff2'), url('fonts/Sentient-Regular.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:400; font-style:italic; src:url('fonts/Sentient-Italic.woff2') format('woff2'), url('fonts/Sentient-Italic.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:500; font-style:normal; src:url('fonts/Sentient-Medium.woff2') format('woff2'), url('fonts/Sentient-Medium.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:500; font-style:italic; src:url('fonts/Sentient-MediumItalic.woff2') format('woff2'), url('fonts/Sentient-MediumItalic.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:700; font-style:normal; src:url('fonts/Sentient-Bold.woff2') format('woff2'), url('fonts/Sentient-Bold.woff') format('woff'); font-display:swap; } @font-face { font-family:'Sentient'; font-weight:700; font-style:italic; src:url('fonts/Sentient-BoldItalic.woff2') format('woff2'), url('fonts/Sentient-BoldItalic.woff') format('woff'); font-display:swap; } :root { /* ---------- Brand core (from Peak Product Group) ---------- */ --green: #489D73; /* primary */ --green-700: #34795A; /* hover / deep */ --green-800: #285C45; --green-300: #8FC4A8; /* tint */ --green-100: #DCEDE4; /* wash */ --sand: #F1AF6E; /* secondary / accent */ --sand-600: #D9914A; /* sand hover / text-on-light */ --sand-200: #FBE3C7; /* wash */ --ink: #2E3A3E; /* near-black slate — primary text & logo outline */ --ink-700: #46545A; /* secondary text */ --ink-500: #6B777C; /* muted text / captions */ --ink-300: #9AA4A8; /* disabled / placeholder */ --cool-100: #DFE7ED; /* cool light (PPG) — chips, cool surfaces */ --cool-50: #EEF3F6; /* ---------- Warm taupe paper (Climatalyst-borrowed neutrals) ---------- */ --paper: #ECE6DB; /* default page background — warm taupe */ --paper-deep: #E2DACB; /* sunken sections */ --surface: #F6F2EA; /* raised cards on paper */ --surface-pure: #FCFAF5; /* purest card / input fill */ --line: #DAD1C0; /* hairline borders on paper */ --line-strong: #C8BCA6; /* ---------- Semantic ---------- */ --bg: var(--paper); --fg1: var(--ink); /* primary text */ --fg2: var(--ink-700); /* secondary text */ --fg3: var(--ink-500); /* muted */ --accent: var(--green); --accent-fg: #FFFFFF; --highlight: var(--sand); --border: var(--line); --focus-ring: color-mix(in oklch, var(--green) 55%, transparent); --positive: #489D73; --warning: #D9914A; --danger: #C5564A; --info: #4F7E9B; /* ---------- Dark surface (slate) — used for footers, terminal, agent panels ---------- */ --dark-bg: #232C30; --dark-surface: #2E3A3E; --dark-line: #3D4A4F; --dark-fg1: #F1EEE6; --dark-fg2: #AEB8BB; --dark-fg3: #7C8888; /* ---------- Type families ---------- */ --font-display: 'Sentient', Georgia, 'Times New Roman', serif; --font-body: 'Hanken Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Type scale (fluid-ish, rem) ---------- */ --text-xs: 0.75rem; /* 12 — micro labels (mono) */ --text-sm: 0.875rem; /* 14 — captions, meta */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — lead body */ --text-lg: 1.375rem; /* 22 — small heading */ --text-xl: 1.75rem; /* 28 — h3 */ --text-2xl: 2.5rem; /* 40 — h2 */ --text-3xl: 3.5rem; /* 56 — h1 */ --text-4xl: 4.75rem; /* 76 — hero display */ --text-5xl: 6.5rem; /* 104 — mega display */ /* line-heights */ --lh-tight: 1.02; /* display serif */ --lh-snug: 1.15; /* headings */ --lh-normal: 1.55; /* body */ /* tracking */ --track-display: -0.015em; --track-tight: -0.01em; --track-label: 0.08em; /* mono eyebrow labels, UPPERCASE */ /* weights (Hanken Grotesque) */ --w-light: 300; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; /* ---------- Spacing scale (4px base) ---------- */ --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 ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; /* default card / input */ --r-lg: 20px; /* large card */ --r-xl: 28px; /* hero panels */ --r-pill: 999px; /* buttons & chips are pill-shaped (Climatalyst feel) */ /* ---------- Shadows (soft, warm, low) ---------- */ --shadow-xs: 0 1px 2px rgba(46,58,62,0.06); --shadow-sm: 0 2px 8px rgba(46,58,62,0.07); --shadow-md: 0 8px 24px rgba(46,58,62,0.09); --shadow-lg: 0 20px 48px rgba(46,58,62,0.12); --shadow-focus: 0 0 0 4px var(--focus-ring); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; --maxw: 1200px; } /* ========================================================================= SEMANTIC TYPE — apply with classes or copy the rules onto your elements ========================================================================= */ .pa-display { /* hero mega titles */ font-family: var(--font-display); font-weight: 400; font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--fg1); } .pa-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--fg1); } .pa-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg1); } .pa-h3 { /* section subheads use the grotesque, not serif */ font-family: var(--font-body); font-weight: var(--w-semi); font-size: var(--text-xl); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg1); } .pa-h4 { font-family: var(--font-body); font-weight: var(--w-semi); font-size: var(--text-lg); line-height: var(--lh-snug); color: var(--fg1); } .pa-lead { /* intro paragraph under a heading */ font-family: var(--font-body); font-weight: var(--w-reg); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg2); } .pa-body { font-family: var(--font-body); font-weight: var(--w-reg); font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg2); } .pa-small { font-family: var(--font-body); font-weight: var(--w-reg); font-size: var(--text-sm); line-height: 1.5; color: var(--fg3); } .pa-eyebrow { /* mono uppercase label above headings */ font-family: var(--font-mono); font-weight: var(--w-med); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--green-700); } .pa-mono { font-family: var(--font-mono); font-weight: var(--w-reg); font-size: var(--text-sm); color: var(--fg2); } .pa-serif-italic { /* the editorial accent — serif italic for emphasis */ font-family: var(--font-display); font-style: italic; }