/* ============================================================ PubGen AI — Brand design tokens Import this file and reference the CSS custom properties below. Example: color: var(--pg-forest); ============================================================ */ /* Brand webfonts — same self-hosted files as the live pubgen.ai site */ @font-face { font-family: Tiempos; src: url('https://public-assets-prod.pubgen.ai/brand_c4e99ca7-bf22-477e-ac04-b786bf273f84/asset_b7c04aba-6bff-431d-8f80-e2bff7cceb1d.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: Inter; src: url('https://public-assets-prod.pubgen.ai/brand_c4e99ca7-bf22-477e-ac04-b786bf273f84/asset_f60c6e8b-3d0a-42fb-be5e-2282a313422a.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: Inter; src: url('https://public-assets-prod.pubgen.ai/brand_c4e99ca7-bf22-477e-ac04-b786bf273f84/asset_74fb1424-d745-4382-ae74-d39a0fe0e55b.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('https://public-assets-prod.pubgen.ai/brand_c4e99ca7-bf22-477e-ac04-b786bf273f84/asset_7bc68663-3437-48fd-a6ac-24224595dd40.woff2') format('woff2'); font-weight: 400; font-display: swap; } :root { /* ---- Core palette ---- */ --pg-forest: #0A332B; /* primary brand green */ --pg-ink: #0F1412; /* near-black text */ --pg-energy: #FF5A00; /* accent / CTA orange */ --pg-evergreen: #21837A; /* secondary teal */ --pg-ivory: #FDFDF5; /* light surface / text on dark */ --pg-paper: #F2F1EA; /* default page background */ --pg-sand: #D6CEB2; /* warm neutral */ --pg-walnut: #4A3527; /* deep warm brown */ --pg-line: #DFE1D6; /* hairline / borders */ /* ---- Semantic roles ---- */ --pg-bg: var(--pg-paper); --pg-surface: var(--pg-ivory); --pg-text: var(--pg-ink); --pg-text-muted: #5b6660; --pg-text-invert: var(--pg-ivory); --pg-primary: var(--pg-forest); --pg-accent: var(--pg-energy); --pg-secondary: var(--pg-evergreen); --pg-border: var(--pg-line); /* ---- Typefaces ---- */ --pg-serif: Tiempos, "Times New Roman", Georgia, serif; /* headlines, editorial */ --pg-sans: Inter, -apple-system, "Segoe UI", sans-serif; /* body, UI */ --pg-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* labels, kickers, code */ /* ---- Weights ---- */ --pg-weight-regular: 400; --pg-weight-medium: 500; --pg-weight-semibold:600; /* ---- Type scale (rem, 1rem = 16px) ---- */ --pg-text-xs: 0.75rem; /* 12 — mono kickers */ --pg-text-sm: 0.875rem; /* 14 */ --pg-text-base: 1rem; /* 16 — body */ --pg-text-lg: 1.25rem; /* 20 */ --pg-text-xl: 1.5rem; /* 24 */ --pg-text-2xl: 2.125rem; /* 34 — section heads */ --pg-text-3xl: 3rem; /* 48 */ --pg-text-4xl: 4.5rem; /* 72 — display */ /* ---- Spacing scale ---- */ --pg-space-1: 0.25rem; --pg-space-2: 0.5rem; --pg-space-3: 0.75rem; --pg-space-4: 1rem; --pg-space-6: 1.5rem; --pg-space-8: 2rem; --pg-space-12: 3rem; --pg-space-16: 4rem; /* ---- Radii ---- */ --pg-radius-sm: 7px; --pg-radius-md: 12px; --pg-radius-lg: 22px; --pg-radius-pill: 999px; /* ---- Elevation ---- */ --pg-shadow-card: 0 30px 60px rgba(10, 51, 43, 0.18); --pg-shadow-pop: 0 40px 80px rgba(10, 51, 43, 0.35); /* ---- Social card themes (1080x1080) ---- */ --pg-card-ivory-bg: var(--pg-ivory); --pg-card-ivory-fg: var(--pg-forest); --pg-card-paper-bg: var(--pg-paper); --pg-card-paper-fg: var(--pg-forest); --pg-card-forest-bg: var(--pg-forest); --pg-card-forest-fg: var(--pg-ivory); --pg-card-energy-bg: var(--pg-energy); --pg-card-energy-fg: #ffffff; --pg-card-evergreen-bg: var(--pg-evergreen);--pg-card-evergreen-fg:var(--pg-ivory); /* ---- Brand logos (hosted SVGs, public + CORS) — use as background-image ---- */ --pg-logo-mark: url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark.svg"); /* forest mark — light backgrounds */ --pg-logo-mark-ivory: url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark-ivory.svg"); /* mark — dark backgrounds */ --pg-logo-mark-white: url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark-white.svg"); /* monochrome white mark */ --pg-logo-horizontal-dark: url("https://pubgen-brand-system.vercel.app/logos/pubgen-horizontal-dark.svg"); /* full lockup — light backgrounds */ --pg-logo-horizontal-light: url("https://pubgen-brand-system.vercel.app/logos/pubgen-horizontal-light.svg"); /* full lockup — dark backgrounds */ } /* ---- Logo helper classes (set width/height, then apply) ---- */ .pg-logo { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; } .pg-logo--mark { background-image: var(--pg-logo-mark); aspect-ratio: 49.71 / 52.1; } .pg-logo--mark-ivory { background-image: var(--pg-logo-mark-ivory); aspect-ratio: 49.71 / 52.1; } .pg-logo--mark-white { background-image: var(--pg-logo-mark-white); aspect-ratio: 49.71 / 52.1; } .pg-logo--horizontal { background-image: var(--pg-logo-horizontal-dark); aspect-ratio: 285.73 / 52.1; } .pg-logo--horizontal-light{ background-image: var(--pg-logo-horizontal-light); aspect-ratio: 285.73 / 52.1; } /* ---- Optional helper classes ---- */ .pg-kicker { font-family: var(--pg-mono); font-size: var(--pg-text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--pg-forest); } .pg-display { font-family: var(--pg-serif); font-weight: var(--pg-weight-medium); line-height: 1.05; letter-spacing: -.01em; } .pg-body { font-family: var(--pg-sans); font-size: var(--pg-text-base); line-height: 1.55; color: var(--pg-text); } .pg-rule { width: 120px; height: 5px; background: var(--pg-energy); border: 0; } .pg-btn { font-family: var(--pg-mono); font-size: var(--pg-text-xs); text-transform: uppercase; letter-spacing: .05em; padding: 11px 18px; border-radius: var(--pg-radius-sm); border: 1px solid var(--pg-forest); background: var(--pg-forest); color: var(--pg-ivory); cursor: pointer; } .pg-btn--accent { background: var(--pg-energy); border-color: var(--pg-energy); color: #fff; }