/* PostBridge AI — Design System tokens * Source of truth for colors, typography, spacing, radii, shadows, and * semantic roles. Import once per page; consume via CSS custom properties. * * Loaded by every page via . * Brand: dark blue-black canvas, cool-blue accent, Inter + JetBrains Mono. * * Fonts (Inter + JetBrains Mono) are loaded separately via tags in * each page's for better render performance — don't @import them * here (it'd block CSS parsing on the font network round-trip). */ :root { /* ========================================================== * BASE COLORS * ========================================================== */ --pb-bg: #0a0e1a; --pb-surface: #111827; --pb-surface-2: #0f172a; --pb-border: #1f2937; --pb-border-2: #334155; --pb-text: #e5e7eb; --pb-text-2: #f1f5f9; --pb-muted: #6b7280; --pb-muted-2: #94a3b8; --pb-dim: #4b5563; /* Accents */ --pb-accent: #3b82f6; --pb-accent-hi: #60a5fa; --pb-accent-lo: #2563eb; --pb-accent-soft: #93c5fd; --pb-green: #10b981; --pb-green-2: #4ade80; --pb-amber: #f59e0b; --pb-amber-2: #fbbf24; --pb-purple: #8b5cf6; --pb-red: #ef4444; --pb-red-2: #f87171; /* Pitch-deck accent — terminal / CTA moments only */ --pb-lime: #a8f54a; --pb-lime-soft: rgba(168, 245, 74, 0.25); /* Back-compat with existing per-page var names (simpler aliases). */ --bg: var(--pb-bg); --surface: var(--pb-surface); --border: var(--pb-border); --text: var(--pb-text); --muted: var(--pb-muted); --accent: var(--pb-accent); --green: var(--pb-green); --purple: var(--pb-purple); --warn: var(--pb-amber-2); /* Semantic roles — prefer these in new code. */ --fg-1: var(--pb-text); --fg-2: var(--pb-muted); --fg-3: var(--pb-dim); --fg-brand: var(--pb-accent); --fg-success: var(--pb-green); --fg-warn: var(--pb-amber); --fg-error: var(--pb-red); --fg-info: var(--pb-purple); --bg-canvas: var(--pb-bg); --bg-surface: var(--pb-surface); --bg-elevated: #162036; --bg-code: var(--pb-bg); --border-1: var(--pb-border); --border-2: var(--pb-border-2); --border-accent: rgba(59, 130, 246, 0.4); /* ========================================================== * GRADIENTS * ========================================================== */ --grad-title: linear-gradient(135deg, #e5e7eb 0%, #3b82f6 100%); --grad-cta: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --grad-highlight: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.08)); /* ========================================================== * SHADOWS & GLOWS * ========================================================== */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-elev: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-cta: 0 6px 24px rgba(59, 130, 246, 0.45); --glow-cta-pulse: 0 0 0 0 rgba(59, 130, 246, 0.5), 0 6px 24px rgba(59, 130, 246, 0.45); --glow-brand: 0 8px 32px rgba(59, 130, 246, 0.25); /* ========================================================== * RADII & SPACING * ========================================================== */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 999px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* ========================================================== * TYPOGRAPHY * ========================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace; --font-display: var(--font-sans); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.6; --lh-code: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-mono: 0.04em; --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-base: 1rem; --fs-md: 1.05rem; --fs-lg: 1.15rem; --fs-xl: 1.45rem; --fs-2xl: 1.6rem; --fs-3xl: 2.25rem; --fs-4xl: 2.75rem; --fs-5xl: 3.5rem; } /* ========================================================== * TYPE UTILITY CLASSES — optional; apply by class * ========================================================== */ .type-hero { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); background: var(--grad-title); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .type-h1 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg-1); } .type-h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--fg-1); } .type-h3 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); } .type-body { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-base); color: var(--fg-1); } .type-body-sm { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--fg-2); } .type-muted { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--fg-2); } .type-label { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); } .type-code { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-code); color: var(--fg-2); letter-spacing: var(--tracking-mono); } /* ========================================================== * PRIMITIVE COMPONENT CLASSES — ship-ready patterns * ========================================================== */ /* Pill badge — status, version markers, small tags. * Tones: .pb-badge--info (default), --ok, --lime, --warn. */ .pb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-mono); text-transform: uppercase; background: rgba(59, 130, 246, 0.12); color: var(--pb-accent-hi); border: 1px solid rgba(59, 130, 246, 0.3); } .pb-badge--ok { background: rgba(16, 185, 129, 0.12); color: var(--pb-green-2); border-color: rgba(16, 185, 129, 0.3); } .pb-badge--lime { background: rgba(168, 245, 74, 0.15); color: var(--pb-lime); border-color: rgba(168, 245, 74, 0.35); } .pb-badge--warn { background: rgba(245, 158, 11, 0.12); color: var(--pb-amber-2); border-color: rgba(245, 158, 11, 0.3); } /* Button — primary gradient + glow, secondary outlined, ghost link. */ .pb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); border: 0; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .pb-btn--primary { background: var(--grad-cta); color: #fff; box-shadow: var(--shadow-cta); } .pb-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(59, 130, 246, 0.55); } .pb-btn--secondary { background: transparent; color: var(--fg-1); border: 1px solid var(--border-2); } .pb-btn--secondary:hover { border-color: var(--pb-accent); } .pb-btn--ghost { background: transparent; color: var(--pb-accent-hi); padding: 11px 8px; box-shadow: none; } /* Card — surface with soft shadow, lifts + borders on hover. */ .pb-card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .pb-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elev); border-color: var(--border-accent); } /* Base body reset when applied directly to . */ .pb-base { margin: 0; font-family: var(--font-sans); background: var(--bg-canvas); color: var(--fg-1); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }