/* * Psycounts Design Tokens — the single source of truth for colour. * ================================================================= * * Loaded by BOTH stacks, ahead of everything else: * - public pages → templates/_pc_head.html * - the app → templates/blank_content_base.html * * Before this file existed, brand green was declared twice — as `--green` * in pc-shared.css and as `--pc-accent` in psycounts-theme.css — so the * marketing site and the product could drift apart without anyone * noticing. Add a colour HERE and nowhere else. * * Three rules this file exists to enforce: * * 1. `--pc-accent` (#10B981) is BRAND, not a button. It is legible * behind dark ink and illegible behind white — at 2.54:1 it fails * WCAG AA for any light label. Use it for tints, washes, active * states and illustration strokes. * 2. `--pc-action-*` is the pair for anything clickable. The fill is * dark enough (5.48:1) that a paper-coloured label on it passes AA. * 3. Status is its OWN ramp, not the accent. `--pc-status-success` * used to be the same #10B981 as `--pc-accent`, which is why a paid * invoice looked identical to a primary button and `.text-success` * was indistinguishable from `.text-primary`. * * Dark mode is keyed on [data-theme="dark"], set by the no-flash script * in the page before any CSS loads. */ :root { /* ── Surfaces — neutral, clean ──────────────────────────────────── */ --pc-bg: #FFFFFF; --pc-bg-subtle: #F5F5F5; --pc-bg-card: #FFFFFF; --pc-bg-sidebar: #1F2937; /* clean slate-800 dark */ --pc-bg-sidebar-hover: rgba(255, 255, 255, 0.07); --pc-bg-sidebar-active: rgba(16, 185, 129, 0.22); /* brand-green wash on active item */ /* ── Text — neutral, plenty of contrast ─────────────────────────── */ --pc-text: #1F2937; /* slate-800 dark text */ --pc-text-rgb: 31, 41, 55; /* rgb() form for use with rgba() */ --pc-text-muted: #6B7280; --pc-text-sidebar: #C9D2DC; --pc-text-sidebar-active: #FFFFFF; --pc-text-sidebar-dim: #8A95A2; /* ── Borders ────────────────────────────────────────────────────── */ --pc-border: #E5E7EB; /* ── Brand accent — NOT for light text on top. See rule 1 above. ── */ --pc-accent: #10B981; --pc-accent-hover: #047857; /* ── Action — everything clickable. See rule 2 above. ───────────── */ --pc-action-fill: #047857; /* 5.48:1 with --pc-action-text */ --pc-action-text: #FAF7F0; --pc-action-hover: #036146; /* ── Buttons — resolved from the action pair, never from the accent */ --pc-btn-primary-bg: var(--pc-action-fill); --pc-btn-primary-text: var(--pc-action-text); --pc-btn-primary-hover: var(--pc-action-hover); --pc-btn-secondary-bg: #6B7280; --pc-btn-secondary-text: #FFFFFF; --pc-btn-secondary-hover: #4B5563; /* ── Status ramp — its own hues, each paired with a tint for pills. Every foreground here clears 4.5:1 on its own tint AND on white, so a status can be a solid label or a soft pill either way. ── */ --pc-status-success: #0F766E; --pc-status-success-soft: #E1F3EB; --pc-status-warning: #855A11; --pc-status-warning-soft: #F5EAD4; --pc-warning-rgb: 133, 90, 17; /* rgb() form for low-alpha tints */ --pc-status-danger: #A63D24; --pc-status-danger-soft: #F7E6E0; --pc-status-info: #1D4E6B; --pc-status-info-soft: #E0EDF4; /* ── Chart ramp ───────────────────────────────────────────────────── Income is ONE measure in three ordered states, so paid/unpaid/draft are a sequential ramp of a single hue — the bar reads as "how much of this has actually landed", most certain darkest. Expenses are a DIFFERENT measure, so they get their own hue and their own side of the zero line, which keeps both on one axis with no second scale. Checked for colour-blind separation and normal-vision distinctness against the surface they sit on; the dark steps below are re-stepped from the same ramp, not an inversion of these. ── */ --pc-chart-paid: #05614A; --pc-chart-unpaid: #2FA37F; --pc-chart-draft: #93C9B4; --pc-chart-expense: #B4622B; /* ── Shadows ────────────────────────────────────────────────────── */ --pc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07); --pc-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ── Type ─────────────────────────────────────────────────────────── The faces themselves are linked in templates/_pc_head.html (public) and templates/blank_content_base.html (app). Change the family in BOTH the and here — nothing else names a font. Display is Bricolage Grotesque: the templates specced 'Poppins' and never loaded it, so nothing depended on the old choice. Its slightly irregular curves sit with the hand-drawn SVG illustrations and the hard offset shadows in a way a purely geometric face does not, and it holds up at 0.78rem for the uppercase eyebrows. Body stays Inter — already loaded by the app, and its tabular figures are what the invoice and expense tables need. ── */ --pc-font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --pc-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* ── Layout ─────────────────────────────────────────────────────── */ --pc-sidebar-width: 220px; --pc-sidebar-rail: 52px; --pc-transition: 150ms ease; /* ── Public-site aliases ──────────────────────────────────────────── The marketing pages were written against these shorter names and the landing page's warm "paper and ink" palette is deliberately NOT the app's neutral one — cream ground, forest ink. They live here so there is still exactly one place a colour is declared. NOTE: these are light-only for now. The public pages cannot go dark until the inline SVG illustrations in index_modern.html stop hardcoding fill="#FAF7F0" / fill="#D1FAE5". ── */ --green: var(--pc-accent); --green-deep: var(--pc-action-fill); --green-soft: #D1FAE5; --green-mist: #ECFDF5; --ink: #1F3A2E; --paper: #FAF7F0; --paper-warm: #F0E9D8; --quiet: #4B6358; /* ── Bootstrap variable overrides ─────────────────────────────────── Bootstrap ships its own defaults (--bs-primary: #0d6efd blue, --bs-success: #198754) which leak through any unstyled .btn-primary or .text-success. Pin them to ours so every Bootstrap-rendered widget picks up the Psycounts palette. --bs-primary is the ACTION fill, not the accent: Bootstrap paints .btn-primary with it and puts white on top, which at the accent's #10B981 was 2.54:1. And --bs-success is the status green, so that .text-primary and .text-success stop being the same colour. */ --bs-primary: var(--pc-action-fill); --bs-primary-rgb: 4, 120, 87; --bs-success: var(--pc-status-success); --bs-success-rgb: 15, 118, 110; --bs-danger: var(--pc-status-danger); --bs-danger-rgb: 166, 61, 36; --bs-warning: var(--pc-status-warning); --bs-warning-rgb: 133, 90, 17; --bs-link-color: var(--pc-action-fill); --bs-link-hover-color: var(--pc-action-hover); --bs-link-color-rgb: 4, 120, 87; } [data-theme="dark"] { /* Clean neutral darks with brand-green accents — same philosophy as light mode: don't tint every surface green. */ --pc-bg: #1A1A1A; --pc-bg-subtle: #212121; --pc-bg-card: #2A2A2A; --pc-bg-sidebar: #141414; --pc-bg-sidebar-hover: rgba(255, 255, 255, 0.05); --pc-bg-sidebar-active: rgba(16, 185, 129, 0.22); --pc-text: #E5E5E5; --pc-text-rgb: 229, 229, 229; --pc-text-muted: #A3A3A3; --pc-text-sidebar: #C9D2DC; --pc-text-sidebar-dim: #8A95A2; --pc-border: #2F2F2F; --pc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --pc-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); /* On a dark ground the relationship inverts: the accent is bright enough to carry DARK text, so the action pair flips rather than keeping a dark fill nothing would read against. */ --pc-accent: #10B981; --pc-accent-hover: #34D399; --pc-action-fill: #34D399; --pc-action-text: #10201A; /* 8.8:1 on the fill */ --pc-action-hover: #6EE7B7; --pc-btn-secondary-bg: #374151; --pc-btn-secondary-text: #E5E5E5; --pc-btn-secondary-hover: #4B5563; /* Status — lifted so each still clears 4.5:1 against a dark card */ --pc-status-success: #5FD9AC; --pc-status-success-soft: #163026; --pc-status-warning: #DDAA4E; --pc-status-warning-soft: #2C2416; --pc-warning-rgb: 221, 170, 78; --pc-status-danger: #EB9377; --pc-status-danger-soft: #32201A; --pc-status-info: #7FC0E0; --pc-status-info-soft: #132833; /* Re-stepped from the same ramp, not inverted: a light ramp flipped onto a dark ground stops being monotonic. */ --pc-chart-paid: #8CF0C8; --pc-chart-unpaid: #31B08F; --pc-chart-draft: #227A63; --pc-chart-expense: #DD8F4F; --bs-primary-rgb: 52, 211, 153; --bs-success-rgb: 95, 217, 172; --bs-danger-rgb: 235, 147, 119; --bs-warning-rgb: 221, 170, 78; --bs-link-color-rgb: 52, 211, 153; }