/* * 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. * * The palette is the iOS app's (Darwin/Assets.xcassets in psycounts-ios): * paper ground, forest green, ink text, black in dark mode. Change a * brand colour there and here together. * * Three rules this file exists to enforce: * * 1. `--pc-accent` is BRAND: tints, washes, active states, strokes. * It happens to be the same forest green as the action fill in * light mode, but in dark mode it is mint, which no light label * can sit on. Do not paint a button with it. * 2. `--pc-action-*` is the pair for anything clickable. Paper on * forest is 7.02:1 (light); dark ink on mint is 8.8:1 (dark). * 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 — iOS BrandPaper ground, white cards ─────────────── */ --pc-bg: #FAF7F0; --pc-bg-subtle: #F2F3EC; --pc-bg-card: #FFFFFF; /* Surfaces, as on iOS: BrandGreenSoft laid over the page at the same opacities the app uses (core/test_ios_palette.py derives and pins them). --pc-bg-card stays the CONTROL fill (inputs, modals, menus). */ --pc-surface: #EFF1EA; /* 30%: cards, forms, list panels */ --pc-surface-panel: #E7EEE6; /* 50%: dashboard panels */ --pc-surface-raised: #E3ECE4; /* 60%: stat tiles */ --pc-surface-border: rgba(75, 99, 88, 0.25); /* BrandQuiet at 25% */ --pc-input-bg: #FFFFFF; /* text fields and selects */ --pc-bg-sidebar: #1F3A2E; /* iOS BrandInk */ --pc-bg-sidebar-hover: rgba(255, 255, 255, 0.07); --pc-bg-sidebar-active: rgba(52, 211, 153, 0.18); /* mint wash on active item */ /* ── Text — neutral, plenty of contrast ─────────────────────────── */ --pc-text: #1F3A2E; /* iOS BrandInk */ --pc-text-rgb: 31, 58, 46; /* rgb() form for use with rgba() */ --pc-text-muted: #4B6358; /* iOS BrandQuiet, 6.09:1 on paper */ --pc-text-sidebar: #D4E4DC; --pc-text-sidebar-active: #FFFFFF; --pc-text-sidebar-dim: #9DB5A8; /* Sidebar frame (pc-shell.css). The sidebar is dark in both themes. */ --pc-sidebar-rule: rgba(134, 138, 168, 0.15); --pc-sidebar-rule-strong: rgba(134, 138, 168, 0.2); --pc-sidebar-edge: rgba(188, 189, 197, 0.5); --pc-sidebar-shadow: 2px 2px 15px rgba(188, 189, 197, 0.1); --pc-sidebar-item-hover: rgba(255, 255, 255, 0.07); --pc-sidebar-btn-hover: rgba(255, 255, 255, 0.08); --pc-sidebar-action-hover: rgba(255, 255, 255, 0.1); --pc-sidebar-active-bg: rgba(52, 211, 153, 0.16); --pc-sidebar-active-bg-hover: rgba(52, 211, 153, 0.24); --pc-sidebar-sub-active-bg: rgba(52, 211, 153, 0.1); --pc-sidebar-active-text: #34D399; --pc-sidebar-accent: #34D399; --pc-sidebar-on-accent: #000000; --pc-sidebar-text-strong: #FFFFFF; --pc-sidebar-scrollbar: #E5F2FF; /* the sidebar's scrollbar (pc-shell.css) */ /* ── Borders ────────────────────────────────────────────────────── */ --pc-border: #E4DDCF; /* ── Brand accent — NOT for light text on top. See rule 1 above. ── */ --pc-accent: #2E5D4F; /* iOS BrandGreen */ --pc-accent-hover: #1F3A2E; --pc-accent-soft: #D4E4DC; /* iOS BrandGreenSoft */ /* ── Action — everything clickable. See rule 2 above. ───────────── */ --pc-action-fill: #2E5D4F; /* 7.02:1 with --pc-action-text */ --pc-action-text: #FAF7F0; --pc-action-hover: #1F3A2E; /* ── 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: #4B6358; --pc-btn-secondary-text: #FFFFFF; --pc-btn-secondary-hover: #1F3A2E; /* ── 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 series ─────────────────────────────────────────────────── The SAME values as the iOS app (DashboardView.swift), so a figure is the same colour on every platform. Roles follow iOS: paid is brand green, unpaid a second green, draft a neutral grey (tentative, least certain), expenses red on their own side of the zero line, one axis. Unpaid and draft were re-stepped on both platforms: iOS drew them as opacities of other colours and the pair differed by only dE 5.4 (light) / 7.1 (dark), under the 15 floor even for full colour vision. Every neighbouring pair is now >= 17.6. dashboard/test_chart.py holds this. ── */ --pc-chart-paid: #2E5D4F; --pc-chart-unpaid: #009869; --pc-chart-draft: #A2AAA5; --pc-chart-expense: #D64A3F; /* ── 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; /* Figures, as iOS sets them (SF Rounded); other systems fall back to Inter. */ --pc-font-figures: ui-rounded, "SF Pro Rounded", "Inter", 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 keeps its emerald accent (pinned below, so the app's move to forest green does not repaint the marketing site). 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: #10B981; --green-deep: #047857; --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-body-color: var(--pc-text); --bs-body-color-rgb: var(--pc-text-rgb); --bs-body-bg: var(--pc-bg); --bs-emphasis-color: var(--pc-text); --bs-secondary-color: var(--pc-text-muted); --bs-border-color: var(--pc-border); --bs-primary: var(--pc-action-fill); --bs-primary-rgb: 46, 93, 79; --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-dark-rgb: 31, 58, 46; /* .text-dark is ink, not Bootstrap's #212529 */ --bs-secondary-rgb: 75, 99, 88; /* .text-secondary is BrandQuiet (6.1:1), not #6c757d */ --bs-link-color: var(--pc-action-fill); --bs-link-hover-color: var(--pc-action-hover); --bs-link-color-rgb: 46, 93, 79; /* ── Focus ───────────────────────────────────────────────────────────── The ring sits outside the element (outline-offset), so it is measured against the page, not the control. The action fill clears the 3:1 non-text minimum on every surface in both themes; --pc-accent does not (2.54:1 on white), which is why the old input rings in business-ui.css were hard to see. Defined by reference, so the dark ramp follows. */ /* ── Django admin ─────────────────────────────────────────────────── The admin extends psycounts_base and does not load admin/css/base.css, where Django defines these, so its delete button read undefined variables and painted nothing. Theme it the way Bootstrap is themed. */ --delete-button-bg: var(--pc-status-danger); --delete-button-hover-bg: var(--pc-status-danger); --button-fg: #FFFFFF; --pc-focus-ring: var(--pc-action-fill); --pc-focus-width: 2px; --pc-focus-offset: 2px; /* ── Measure ─────────────────────────────────────────────────────────── */ --pc-measure-form: 40rem; --pc-content-left: 0px; /* where the content area starts; pc-shell.css follows the sidebar */ } [data-theme="dark"] { /* iOS dark mode: a black ground, near-black cards, mint brand green. Surfaces stay neutral; only the accent is green. */ --pc-bg: #000000; --pc-bg-subtle: #080F0D; --pc-bg-card: #172A22; --pc-bg-sidebar: #0B0F0D; --pc-surface: #0B1511; --pc-surface-panel: #13231C; --pc-surface-raised: #172A22; --pc-surface-border: rgba(143, 168, 154, 0.25); --pc-input-bg: var(--pc-bg-subtle); --pc-bg-sidebar-hover: rgba(255, 255, 255, 0.05); --pc-bg-sidebar-active: rgba(16, 185, 129, 0.22); --pc-text: #E8F0EB; --pc-text-rgb: 232, 240, 235; --pc-text-muted: #8FA89A; --pc-text-sidebar: #D4E4DC; --pc-text-sidebar-dim: #8FA89A; --pc-sidebar-rule-strong: var(--pc-border); --pc-border: #2C2C2E; --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: #34D399; --pc-accent-hover: #6EE7B7; --pc-accent-soft: #264639; /* iOS BrandGreenSoft, dark */ --pc-action-fill: #34D399; --pc-action-text: #10201A; /* 8.8:1 on the fill */ --pc-action-hover: #6EE7B7; --pc-btn-secondary-bg: #2C2C2E; --pc-btn-secondary-text: #E8F0EB; --pc-btn-secondary-hover: #3A3A3C; /* 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; --button-fg: #10201A; /* admin delete button: 8:1 on the dark danger */ --pc-status-info: #7FC0E0; --pc-status-info-soft: #132833; /* Dark values match iOS dark mode, where unpaid reads as dark green and draft as grey; paid is iOS's dark brand green. */ --pc-chart-paid: #34D399; --pc-chart-unpaid: #136447; --pc-chart-draft: #7D8581; --pc-chart-expense: #E5584D; --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; }