/* ========================================================= Privacy Bee — Colors & Type Single source of truth. Import this everywhere. ========================================================= */ /* Fonts — all four families (Open Sans, Inter, Poppins, Orbitron) load from Google Fonts via the in index.html. The self-hosted Inter @font-face from the original tokens file is omitted here because the font file is not part of this bundle; the downloadable master at assets/tokens/ is unchanged. */ :root { /* -------- Brand core -------- Zinc 950 is the MAIN dark brand color (product / dashboard direction), replacing Navy as the lead. Navy is retained below as a legacy consumer token only. */ --pb-zinc-950: #09090B; /* ★ MAIN dark — surfaces, headers, CTAs */ --pb-zinc-900: #18181B; /* dark-mode panels */ --pb-zinc-800: #27272A; /* zinc hover / elevated */ --pb-blue: #006DF5; /* royal blue — CTA / link (consumer) */ --pb-blue-deep: #1B4FDD; /* pressed / link-hover */ --pb-blue-ink: #0066FF; /* brand accent (stroke) */ --pb-amber: #F6BB1E; /* bee yellow — signature */ --pb-amber-2: #FCB223; /* yellow-orange accent */ --pb-amber-soft: #FEDCB5; /* amber wash bg */ /* legacy consumer navy — do not use for new product work */ --pb-navy: #000F30; /* deep brand navy (consumer footer/site) */ --pb-navy-2: #203C89; /* secondary navy */ /* -------- Secondary palette (bold UI / illustration accents) -------- */ --pb-orchid: #6A2FB4; /* medium orchid / purple */ --pb-emerald: #219653; /* emerald green */ --pb-sea: #04B4B4; /* sea green / teal */ --pb-crimson: #FE453A; /* crimson red */ /* -------- Dark mode (Buzz app / dashboard dark) -------- */ --pb-dark-bg: #0B0F1A; /* app background — deep navy-zinc */ --pb-dark-card: #111726; /* elevated cards / rows */ --pb-dark-line: #232A3B; /* hairlines & card borders */ --pb-dark-ink: #FFFFFF; /* primary text on dark */ --pb-dark-ink-2: #9CA3AF; /* secondary text on dark */ --pb-dark-blue: #4A9EFF; /* links / active tab on dark */ /* -------- Semantic signal -------- */ --pb-danger: #FE453A; /* warning red (stat/alert) */ --pb-danger-vivid: #FE453A; /* ios-style vivid red */ --pb-success: #16BC11; /* signal green */ --pb-info: #29ABE2; /* cyan info */ /* -------- Neutrals -------- */ --pb-white: #FFFFFF; --pb-surface: #F4F5F8; /* page bg — MOST common */ --pb-surface-2: #FAFAFA; /* footer bg */ --pb-surface-3: #EEEEEE; /* footer alt bg */ --pb-line: #E4E4E7; --pb-line-2: #D6D6D6; --pb-line-soft: #D9D9D9; --pb-ink: #09090B; /* primary text */ --pb-ink-2: #535353; /* body secondary */ --pb-ink-3: #7E7E7E; /* tertiary / meta */ --pb-ink-muted: #777777; /* card body */ --pb-ink-footer: #696E84; /* footer ink */ /* -------- Risk scale (6-step teal→black used in charts) -------- */ --pb-risk-1: #29ABE2; --pb-risk-2: #2393C2; --pb-risk-3: #1B7195; --pb-risk-4: #13526D; --pb-risk-5: #0D394B; --pb-risk-6: #08242F; /* -------- Type families -------- */ --pb-font-display: "Open Sans", system-ui, -apple-system, Segoe UI, sans-serif; --pb-font-body: "Open Sans", system-ui, -apple-system, Segoe UI, sans-serif; --pb-font-ui: "Inter", system-ui, -apple-system, Segoe UI, sans-serif; --pb-font-marketing:"Poppins", "Open Sans", system-ui, sans-serif; --pb-font-mono-accent:"Orbitron", ui-monospace, SFMono-Regular, monospace; /* -------- Type scale (from Figma metadata, top-used sizes) -------- */ --pb-fs-hero: 96px; /* Poppins Bold marketing hero */ --pb-fs-display: 48px; --pb-fs-h1: 42px; /* Open Sans Bold */ --pb-fs-h2: 38px; /* Open Sans Bold (section head) */ --pb-fs-h3: 28px; /* Open Sans Bold */ --pb-fs-h4: 24px; /* Open Sans Bold */ --pb-fs-h5: 20px; /* Open Sans Bold / Inter */ --pb-fs-body-lg: 22px; --pb-fs-body: 18px; /* default email body (Open Sans) */ --pb-fs-ui: 14px; /* Inter Medium */ --pb-fs-meta: 12px; /* small footer text */ --pb-lh-tight: 1.05; /* @kind other */ --pb-lh-snug: 1.25; /* @kind other */ --pb-lh-body: 1.5; /* @kind other */ --pb-lh-loose: 1.9; /* @kind other */ --pb-tr-heading: -0.01em; /* -------- Spacing -------- */ --pb-sp-1: 4px; --pb-sp-2: 8px; --pb-sp-3: 16px; --pb-sp-4: 24px; --pb-sp-5: 32px; --pb-sp-6: 48px; --pb-sp-7: 64px; --pb-sp-8: 96px; /* -------- Radii -------- */ --pb-radius-sm: 8px; --pb-radius-md: 15px; --pb-radius-lg: 25px; /* card / pill row */ --pb-radius-xl: 50px; /* CTA pill radius */ --pb-radius-full: 9999px; /* -------- Shadows -------- */ --pb-shadow-drop: 0 4px 4px rgba(0,0,0,0.25); /* signature brand drop */ --pb-shadow-card: 0 1px 2px rgba(9,9,11,0.06), 0 8px 20px rgba(9,9,11,0.08); --pb-shadow-soft: 0 2px 8px rgba(9,9,11,0.06); /* -------- Email canvas -------- */ --pb-email-width: 650px; } /* ========================================================= Semantic typography helpers ========================================================= */ .pb-hero { font-family: var(--pb-font-marketing); font-weight: 700; font-size: var(--pb-fs-hero); line-height: var(--pb-lh-tight); letter-spacing: var(--pb-tr-heading); color: var(--pb-ink); } .pb-display { font-family: var(--pb-font-display); font-weight: 700; font-size: var(--pb-fs-display); line-height: var(--pb-lh-tight); letter-spacing: var(--pb-tr-heading); color: var(--pb-ink); } .pb-h1 { font-family: var(--pb-font-display); font-weight: 700; font-size: var(--pb-fs-h1); line-height: 1.15; letter-spacing: var(--pb-tr-heading); color: var(--pb-ink); } .pb-h2 { font-family: var(--pb-font-display); font-weight: 700; font-size: var(--pb-fs-h2); line-height: 48px; letter-spacing: var(--pb-tr-heading); color: var(--pb-ink); } .pb-h3 { font-family: var(--pb-font-display); font-weight: 700; font-size: var(--pb-fs-h3); line-height: 1.2; color: var(--pb-ink); } .pb-h4 { font-family: var(--pb-font-display); font-weight: 700; font-size: var(--pb-fs-h4); line-height: 32px; color: var(--pb-ink); } .pb-eyebrow { font-family: var(--pb-font-display); font-weight: 700; font-size: var(--pb-fs-h4); line-height: 32px; color: var(--pb-blue); text-align: center; } .pb-body-lg { font-family: var(--pb-font-body); font-size: var(--pb-fs-body-lg); line-height: 34px; color: var(--pb-ink-2); } .pb-body { font-family: var(--pb-font-body); font-size: var(--pb-fs-body); line-height: 34px; color: var(--pb-ink-2); } .pb-body-navy { font-family: var(--pb-font-body); font-size: var(--pb-fs-body); line-height: 34px; color: var(--pb-navy); } .pb-ui { font-family: var(--pb-font-ui); font-size: var(--pb-fs-ui); line-height: 1.5; color: var(--pb-ink); } .pb-meta { font-family: var(--pb-font-body); font-size: var(--pb-fs-meta); line-height: 22px; color: var(--pb-ink-2); } .pb-mono { font-family: var(--pb-font-mono-accent); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } /* Bare-element defaults, scoped to .pb-email / .pb-ui for safety */ .pb-scope h1 { font: 700 var(--pb-fs-h1)/1.15 var(--pb-font-display); letter-spacing: var(--pb-tr-heading); color: var(--pb-ink); margin: 0; } .pb-scope h2 { font: 700 var(--pb-fs-h2)/48px var(--pb-font-display); letter-spacing: var(--pb-tr-heading); color: var(--pb-ink); margin: 0; } .pb-scope h3 { font: 700 var(--pb-fs-h3)/1.2 var(--pb-font-display); color: var(--pb-ink); margin: 0; } .pb-scope h4 { font: 700 var(--pb-fs-h4)/32px var(--pb-font-display); color: var(--pb-ink); margin: 0; } .pb-scope p { font: 400 var(--pb-fs-body)/34px var(--pb-font-body); color: var(--pb-ink-2); margin: 0; } .pb-scope a { color: var(--pb-blue); text-decoration: none; } .pb-scope a:hover { text-decoration: underline; }