/* ========================================================================== PNEUMA CENTRAL STYLE GUIDE -------------------------------------------------------------------------- Single source of truth for typography, color, and spacing across the PNEUMA host application AND every tenant (pneuma-ngo, etc.). ========================================================================== 0. DESIGN MANDATE (read before changing anything) -------------------------------------------------------------------------- PNEUMA is modern, relational, and editorial. It is NOT a religious product; it is a leading-edge system that must exude the highest level of quality: professional, sharp, and exceptional. Reference aesthetic: a high-end fashion magazine. It should capture attention through confident typography, generous whitespace, and precise composition -- yet remain strictly minimalist. LESS IS MORE. Remove before you add. Every element must earn its place. Non-negotiables: - Restraint: monochrome palette, few accents, no decorative clutter. - Hierarchy: obey the type scale (title > posttitle > heading > body > labels > fineprint > footnote). One title per view. - Whitespace is a feature, not empty space. - Elegance over ornament; clarity over density. - The platform is globally distributed and 100% FREE. Nothing in the UI should imply cost, paywalls, or exclusivity of access. - The host and every tenant share THIS guide. Brand consistency is mandatory; per-tenant deviation is the exception, not the rule. ========================================================================== DISTRIBUTION MODEL (how this file reaches every app -- recommended design) -------------------------------------------------------------------------- Requirement: apps must NOT depend on the database at request time. So the database is the AUTHORING + VERSIONING store, and this CSS file is the deployed ARTIFACT each app loads. 1. Authoritative source: the `style_guide` table in the pneuma_app database holds the full CSS as one editable document ("one-window code entry"), with an integer `version` and a SHA-256 `checksum`. 2. Publish ("push") action (host admin, one click): a. Validate the CSS (lint/parse) and recompute its SHA-256. b. Confirm checksum matches the stored row (automated integrity check) before shipping anything. c. Write the CSS to each target app's static route as `public/pneuma-theme.css` (host + every tenant) and record `published_at` / `published_by`. 3. Runtime: every app loads its LOCAL, static /pneuma-theme.css. If the database is down, nothing breaks -- the last-published artifact keeps serving. Tenants may also fall back to the host CDN copy at https://www.pneuma.app/pneuma-theme.css. 4. Security: only an authenticated host admin can publish; the push is an integrity-checked, versioned, auditable write (never a live DB read on the request path). HOW IT IS CONSUMED - Host (pneuma-app): loaded locally -> /pneuma-theme.css - Tenants: loaded locally -> /pneuma-theme.css (pushed copy) or cross-site -> https://www.pneuma.app/pneuma-theme.css Any edit published here propagates to every app that loads this file. HOW TO TWEAK - Change a value ONCE in the :root block of the relevant section below. - Every utility class and every app updates automatically. - Light/dark overrides live in the ".dark" blocks at the end of each color section. Typography/spacing are theme-independent. TABLE OF CONTENTS 0. DESIGN MANDATE + DISTRIBUTION MODEL (above) 1. FONT FAMILIES 2. COLOR PALETTE (light + dark) 3. RADIUS & SPACING SCALE 4. TYPOGRAPHY ROLES (in order of appearance) 4.1 title 4.2 posttitle 4.3 heading 4.4 body 4.5 labels 4.6 fineprint 4.7 footnote ========================================================================== */ /* Pull the brand font so tenants render correctly without extra setup. */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"); /* ========================================================================== 1. FONT FAMILIES -------------------------------------------------------------------------- */ :root { --pn-font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif; --pn-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace; } /* ========================================================================== 2. COLOR PALETTE -------------------------------------------------------------------------- Monochrome studio: white canvas, near-black ink, single neutral ramp. Values are OKLCH. Adjust here to re-skin every app at once. -------------------------------------------------------------------------- */ :root { --pn-background: oklch(1 0 0); /* page canvas */ --pn-foreground: oklch(0.145 0 0); /* primary ink */ --pn-muted: oklch(0.97 0 0); /* subtle surface */ --pn-muted-foreground: oklch(0.556 0 0);/* secondary/dimmed ink */ --pn-border: oklch(0.922 0 0); /* hairlines & dividers */ --pn-accent: oklch(0.205 0 0); /* emphasis / links */ } .dark { --pn-background: oklch(0.145 0 0); --pn-foreground: oklch(0.985 0 0); --pn-muted: oklch(0.24 0 0); --pn-muted-foreground: oklch(0.708 0 0); --pn-border: oklch(1 0 0 / 12%); --pn-accent: oklch(0.92 0 0); } /* ========================================================================== 3. RADIUS & SPACING SCALE -------------------------------------------------------------------------- --pn-radius drives all corner rounding; the rest are multiples. Spacing is a simple rem ramp used for vertical rhythm between roles. -------------------------------------------------------------------------- */ :root { --pn-radius: 0.375rem; --pn-radius-sm: calc(var(--pn-radius) * 0.5); --pn-radius-lg: calc(var(--pn-radius) * 1.5); --pn-radius-xl: calc(var(--pn-radius) * 2.5); --pn-space-1: 0.25rem; --pn-space-2: 0.5rem; --pn-space-3: 0.75rem; --pn-space-4: 1rem; --pn-space-6: 1.5rem; --pn-space-8: 2rem; } /* ======================================================================== TEXT SELECTION ------------------------------------------------------------------------ All readable content remains selectable across the host and tenants. ======================================================================== */ html, body, main, article, section, header, footer, nav, aside, p, span, h1, h2, h3, h4, h5, h6, li, dt, dd, label, code, pre, blockquote { -webkit-user-select: text !important; user-select: text !important; } ::selection { background: var(--pn-foreground); color: var(--pn-background); } /* ========================================================================== 4. TYPOGRAPHY ROLES (in order of appearance) -------------------------------------------------------------------------- Each role exposes six knobs so you can tune it in isolation: --pn--family font stack --pn--size font-size (rem, fluid-friendly) --pn--line line-height (unitless) --pn--weight font-weight --pn--tracking letter-spacing (em) --pn--color text color token Apply in markup with the matching class, e.g.

. ========================================================================== */ /* --- 4.1 TITLE ---------------------------------------------------------- The largest text on a page. One per view (the hero / page name). */ :root { --pn-title-family: var(--pn-font-sans); --pn-title-size: 2.5rem; --pn-title-line: 1.1; --pn-title-weight: 700; --pn-title-tracking: -0.02em; --pn-title-color: var(--pn-foreground); } .pn-title { font-family: var(--pn-title-family); font-size: var(--pn-title-size); line-height: var(--pn-title-line); font-weight: var(--pn-title-weight); letter-spacing: var(--pn-title-tracking); color: var(--pn-title-color); text-wrap: balance; } /* --- 4.2 POSTTITLE ------------------------------------------------------ The supporting line that sits directly beneath a title (deck/subtitle). */ :root { --pn-posttitle-family: var(--pn-font-sans); --pn-posttitle-size: 1.25rem; --pn-posttitle-line: 1.4; --pn-posttitle-weight: 400; --pn-posttitle-tracking: 0em; --pn-posttitle-color: var(--pn-muted-foreground); } .pn-posttitle { font-family: var(--pn-posttitle-family); font-size: var(--pn-posttitle-size); line-height: var(--pn-posttitle-line); font-weight: var(--pn-posttitle-weight); letter-spacing: var(--pn-posttitle-tracking); color: var(--pn-posttitle-color); text-wrap: pretty; } /* --- 4.3 HEADING -------------------------------------------------------- Section headings within the body (h2/h3-level). */ :root { --pn-heading-family: var(--pn-font-sans); --pn-heading-size: 1.5rem; --pn-heading-line: 1.25; --pn-heading-weight: 600; --pn-heading-tracking: -0.01em; --pn-heading-color: var(--pn-foreground); } .pn-heading { font-family: var(--pn-heading-family); font-size: var(--pn-heading-size); line-height: var(--pn-heading-line); font-weight: var(--pn-heading-weight); letter-spacing: var(--pn-heading-tracking); color: var(--pn-heading-color); text-wrap: balance; } /* --- 4.4 BODY ----------------------------------------------------------- Default running text. Optimized for comfortable reading. */ :root { --pn-body-family: var(--pn-font-sans); --pn-body-size: 1rem; --pn-body-line: 1.6; --pn-body-weight: 400; --pn-body-tracking: 0em; --pn-body-color: var(--pn-foreground); } .pn-body { font-family: var(--pn-body-family); font-size: var(--pn-body-size); line-height: var(--pn-body-line); font-weight: var(--pn-body-weight); letter-spacing: var(--pn-body-tracking); color: var(--pn-body-color); } /* --- 4.5 LABELS --------------------------------------------------------- Form labels, UI tags, and small uppercase eyebrows. */ :root { --pn-labels-family: var(--pn-font-sans); --pn-labels-size: 0.8125rem; --pn-labels-line: 1.3; --pn-labels-weight: 500; --pn-labels-tracking: 0.02em; --pn-labels-color: var(--pn-foreground); } .pn-labels { font-family: var(--pn-labels-family); font-size: var(--pn-labels-size); line-height: var(--pn-labels-line); font-weight: var(--pn-labels-weight); letter-spacing: var(--pn-labels-tracking); color: var(--pn-labels-color); } /* --- 4.6 FINEPRINT ------------------------------------------------------ Legal / disclaimer text. Smaller and dimmed, still legible. */ :root { --pn-fineprint-family: var(--pn-font-sans); --pn-fineprint-size: 0.75rem; --pn-fineprint-line: 1.5; --pn-fineprint-weight: 400; --pn-fineprint-tracking: 0em; --pn-fineprint-color: var(--pn-muted-foreground); } .pn-fineprint { font-family: var(--pn-fineprint-family); font-size: var(--pn-fineprint-size); line-height: var(--pn-fineprint-line); font-weight: var(--pn-fineprint-weight); letter-spacing: var(--pn-fineprint-tracking); color: var(--pn-fineprint-color); } /* --- 4.7 FOOTNOTE ------------------------------------------------------- The smallest text: citations, footer meta, monospaced references. */ :root { --pn-footnote-family: var(--pn-font-mono); --pn-footnote-size: 0.6875rem; --pn-footnote-line: 1.45; --pn-footnote-weight: 400; --pn-footnote-tracking: 0.02em; --pn-footnote-color: var(--pn-muted-foreground); } .pn-footnote { font-family: var(--pn-footnote-family); font-size: var(--pn-footnote-size); line-height: var(--pn-footnote-line); font-weight: var(--pn-footnote-weight); letter-spacing: var(--pn-footnote-tracking); color: var(--pn-footnote-color); }