/* ===================================================================== ProfiloPolitics — BLOG DESIGN TOKENS for the 2nd Amendment Chat Room Owner's rule (2026-10-24): "use same blog colour and design" — the room must look like it belongs to ProfiloPolitics. Every value below was taken from the LIVE blog on 2026-10-24: https://profilopolitics.com/ → /assets/index--kYLLUDg.css (the blog's own :root custom properties and component rules — nothing here is guessed or invented). Each token names its source. Where a chat component needs a tint/shade the blog does not define, the component CSS derives it from one of these tokens and says so. LOAD ORDER: this file loads FIRST, before every other stylesheet in this package (and before the chat app's own component CSS). All package CSS references these tokens as var(--pp-…, fallback) so each file also degrades gracefully if loaded alone. FONTS: the blog loads its families from Google Fonts in the page — Merriweather + Lora (editorial serif) and Plus Jakarta Sans + Inter (UI sans). The chat pages must include the SAME Google Fonts as the blog homepage, or the serif/sans stacks below fall back to Georgia / system sans. ===================================================================== */ :root { /* ---- Surfaces ---------------------------------------------------- --pp-paper #fff blog :root --paper / --bg-surface / --bg-card --pp-page #f8fafc blog :root --bg-page; body background-color --pp-cream #fbfaf7 .home-portal-card.news-card gradient end stop --pp-shade #f1f5f9 blog :root --shade / --bg-subtle */ --pp-paper: #fff; --pp-page: #f8fafc; --pp-cream: #fbfaf7; --pp-shade: #f1f5f9; /* ---- Ink / navy -------------------------------------------------- --pp-ink #0c1b33 blog :root --ink / --brand-navy / --bg-dark; footer background; .btn-primary background --pp-navy-dark #071120 blog :root --brand-navy-dark / --brand-dark; .btn-primary:hover background --pp-navy-light #1e293b blog :root --brand-navy-light */ --pp-ink: #0c1b33; --pp-navy-dark: #071120; --pp-navy-light: #1e293b; /* ---- Text -------------------------------------------------------- --pp-heading #0f172a blog :root --text-heading (h1–h6 colour) --pp-text #334155 blog :root --text-main (body colour) --pp-muted #475569 blog :root --muted --pp-faint #64748b blog :root --text-muted --pp-light #94a3b8 blog :root --text-light; .btn-outline border */ --pp-heading: #0f172a; --pp-text: #334155; --pp-muted: #475569; --pp-faint: #64748b; --pp-light: #94a3b8; /* ---- Lines ------------------------------------------------------- --pp-line #cbd5e1 blog :root --line; .site-header border; .form-input border --pp-border #e2e8f0 blog :root --border-color (card borders) */ --pp-line: #cbd5e1; --pp-border: #e2e8f0; /* ---- The blog's reds (it uses a family, not one red) ------------- --pp-accent #a42d2d blog :root --accent; .pp-ticker-badge bg; .home-portal-card.news-card top border; .live-pulse-badge text/dot --pp-accent-ink #fff9f6 blog :root --accent-ink (text on accent) --pp-red #c92a2a .pp-filter-item.is-active border-left-color (the category rail's 3px active edge); the NEW UPDATE pill (case-indicator.css) --pp-red-live #d92323 .pp-kicker background; carousel dots/arrows (the blog's "breaking" red) --pp-red-brand #dc2626 blog :root --brand-red --pp-red-dark #991b1b .badge-elections text colour --pp-red-tint #fef2f2 .badge-elections / .live-pulse-badge bg --pp-red-line #fecaca .badge-elections / .live-pulse-badge border */ --pp-accent: #a42d2d; --pp-accent-ink: #fff9f6; --pp-red: #c92a2a; --pp-red-live: #d92323; --pp-red-brand: #dc2626; --pp-red-dark: #991b1b; --pp-red-tint: #fef2f2; --pp-red-line: #fecaca; /* ---- Blue, gold, note, green ------------------------------------- --pp-blue #1d4ed8 blog :root --brand-accent / --border-focus --pp-gold #b45309 blog :root --brand-gold --pp-gold-bright #f59e0b .btn-gold background/border --pp-gold-tint #fef3c7 blog :root --brand-gold-subtle --pp-gold-line #fcd34d blog :root --brand-gold-border --pp-note #fefce8 blog :root --note --pp-green #15803d blog :root --brand-green */ --pp-blue: #1d4ed8; --pp-gold: #b45309; --pp-gold-bright: #f59e0b; --pp-gold-tint: #fef3c7; --pp-gold-line: #fcd34d; --pp-note: #fefce8; --pp-green: #15803d; /* ---- Type -------------------------------------------------------- --pp-font-head blog :root --font-editorial; h1–h6 font-family --pp-font-serif blog :root --serif; .nav-button, .search-inner input (editorial serif for nav + search) --pp-font-sans blog :root --font-sans; body, .btn, .badge */ --pp-font-head: "Merriweather", "Lora", Georgia, "Times New Roman", serif; --pp-font-serif: "Merriweather", Georgia, "Times New Roman", serif; --pp-font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ---- Shape, shadow, motion (blog :root, verbatim) ---------------- */ --pp-radius-xs: 2px; /* --radius-xs; .badge radius */ --pp-radius-sm: 4px; /* --radius-sm; .btn, .form-input, .pp-kicker */ --pp-radius-md: 6px; /* --radius-md */ --pp-radius-lg: 8px; /* --radius-lg (the blog's largest corner) */ --pp-radius-full: 9999px; /* --radius-full; pills */ --pp-shadow-xs: 0 1px 2px #0c1b330d; --pp-shadow-sm: 0 1px 3px #0c1b3314, 0 1px 2px #0c1b330a; --pp-shadow-md: 0 4px 12px #0c1b3314, 0 2px 4px #0c1b330a; --pp-shadow-lg: 0 12px 28px #0c1b331f; --pp-shadow-xl: 0 20px 35px #0c1b3329; --pp-transition: all .2s ease-in-out; /* blog :root --transition */ /* .form-input:focus box-shadow on the blog (navy focus ring) */ --pp-focus-ring: 0 0 0 3px #0c1b331f; }