@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* ============================================================================
PRIMI HOUSE DESIGN SYSTEM — primi-theme.css
Locked token set. Import this into every Primidigital report / scan / audit /
dashboard. Do NOT redefine these values per-build — that is the regression this
system exists to stop.
Brand green sampled from the real emblem (ai-platform-logos/PD_green_white_sm.png)
= #3E9250. Chart categorical palette is the dataviz-validated reference set
(proven AA + CVD-safe in light AND dark). Every text/bg pair in this file is
WCAG-AA verified — see CONTRAST-PROOF.md.
Theme: default is light. Dark values apply via BOTH the OS media query and an
explicit [data-theme="dark"] stamp (the toggle must win either way).
============================================================================ */
:root {
color-scheme: light;
/* ---- GREY RAMP (cool slate neutral) ---------------------------------- */
--pd-grey-0: #ffffff;
--pd-grey-50: #f7f8f9;
--pd-grey-100: #eef1f3;
--pd-grey-200: #dfe3e7;
--pd-grey-300: #c6ccd2;
--pd-grey-400: #9aa2ab;
--pd-grey-500: #5f6873; /* muted-text-safe on white (5.65:1) */
--pd-grey-600: #4d555f;
--pd-grey-700: #363d45;
--pd-grey-800: #23282e;
--pd-grey-900: #14171b;
--pd-grey-950: #0c0e11;
/* ---- BRAND GREEN RAMP (core #3E9250, sampled from the real emblem) ---- */
--pd-green-50: #f0f7f2;
--pd-green-100: #d9ebde;
--pd-green-200: #b4d7bf;
--pd-green-300: #86bf97;
--pd-green-400: #5aa870; /* brand green stepped for dark grounds */
--pd-green-500: #3e9250; /* BRAND CORE — emblem green */
--pd-green-600: #337a43; /* primary action on light (white text 5.24:1) */
--pd-green-700: #2a6337; /* focus ring / hover / green text (7.15:1) */
--pd-green-800: #234f2d;
--pd-green-900: #17361f;
/* ---- ACCENT (blue — links, interactive, info; also chart slot 1) ------ */
--pd-accent-400: #5a8bf0; /* dark-ground accent */
--pd-accent-500: #2563eb; /* accent core (link/info text 5.17:1) */
--pd-accent-600: #1d4fd0; /* accent action (white text) */
/* ---- SEMANTIC — surfaces & ink (LIGHT) ------------------------------- */
--pd-bg: #f7f8f9; /* page plane */
--pd-surface: #ffffff; /* card / panel surface */
--pd-surface-2: #f0f2f4; /* inset / subtle fill */
--pd-text: #14171b; /* primary ink (17.98:1) */
--pd-text-secondary:#4d555f; /* secondary ink (7.55:1) */
--pd-muted: #5f6873; /* labels / captions (5.65:1) */
--pd-border: #dfe3e7; /* decorative hairline divider (WCAG-exempt) */
--pd-border-strong: #838b94; /* component boundary / input outline (3.45:1) */
/* ---- SEMANTIC — status (LIGHT) --------------------------------------- */
--pd-success: #1f7a3f; /* success TEXT (5.37:1) */
--pd-success-fill: #3e9250; /* success fill / bar */
--pd-warn: #9a6410; /* warning TEXT (4.99:1) */
--pd-warn-fill: #e0992a; /* warning fill */
--pd-danger: #b23127; /* danger TEXT (6.25:1) */
--pd-danger-fill: #d64545; /* danger fill */
--pd-info: #2563eb; /* info TEXT (5.17:1) */
/* ---- SEMANTIC ROLE ALIASES (use these in components) ----------------- */
--pd-action: var(--pd-green-600);
--pd-action-hover: var(--pd-green-700);
--pd-on-action: #ffffff;
--pd-focus: var(--pd-green-700);
--pd-link: #1d6f3e; /* green link text on white (6.18:1) */
/* ---- CHART PALETTE — dataviz-validated reference set (LIGHT) ---------
Fixed order. Assign in order, never cycle. Passes CVD + normal-vision
floors in both modes. Slots 4/3/5 (yellow/aqua/magenta) sit <3:1 on the
light surface: the RELIEF RULE applies — ship direct labels or a table
view when these carry meaning. Brand green is slot 6. */
--pd-cat-1: #2a78d6; /* blue */
--pd-cat-2: #eb6834; /* orange */
--pd-cat-3: #1baf7a; /* aqua */
--pd-cat-4: #eda100; /* yellow */
--pd-cat-5: #e87ba4; /* magenta */
--pd-cat-6: #008300; /* green */
--pd-cat-7: #4a3aa7; /* violet */
--pd-cat-8: #e34948; /* red */
/* single-series charts + KPI emphasis use the BRAND green */
--pd-series: var(--pd-green-500);
/* sequential (blue, light->dark) for heatmaps/choropleths */
--pd-seq-1: #cde2fb;
--pd-seq-2: #9ec5f4;
--pd-seq-3: #5598e7;
--pd-seq-4: #2a78d6;
--pd-seq-5: #1c5cab;
--pd-seq-6: #104281;
/* chart chrome */
--pd-chart-surface: #ffffff;
--pd-grid: #e1e0d9; /* hairline gridline */
--pd-axis: #c3c2b7; /* baseline / axis */
/* ---- TYPE SCALE (hand-tuned; tabular figures for data) ----------------
Chosen 2026-08-12 from design-system/type-sample.html (option A), which
compared these against the system stack on identical markup and frozen
numbers. Matches the public ranker, so internal and external screens read
as one product.
The faces are loaded by the @import at the top of THIS file, not by a
in each page. That is deliberate: it keeps the "no page ever names
a font" rule true, and a page that forgets a would otherwise fall
back silently to a system face that looks almost right. The cost is that
the @import serialises behind this stylesheet — acceptable on internal
dashboards, and worth re-testing if these tokens are ever used on a
landing page where first paint is revenue-critical. */
--pd-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--pd-font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
--pd-text-2xs: 11px; --pd-lh-2xs: 1.45; /* micro labels */
--pd-text-xs: 12.5px; --pd-lh-xs: 1.5; /* captions, table cells */
--pd-text-sm: 14px; --pd-lh-sm: 1.55; /* small body */
--pd-text-base:15.5px; --pd-lh-base:1.6; /* body */
--pd-text-md: 17px; --pd-lh-md: 1.5; /* lead */
--pd-text-lg: 20px; --pd-lh-lg: 1.35; /* card title */
--pd-text-xl: 26px; --pd-lh-xl: 1.25; /* section head */
--pd-text-2xl: 34px; --pd-lh-2xl: 1.18; /* page title */
--pd-text-3xl: 46px; --pd-lh-3xl: 1.05; /* KPI value */
--pd-text-4xl: 60px; --pd-lh-4xl: 1.0; /* hero KPI */
--pd-weight-normal: 400;
--pd-weight-medium: 500;
--pd-weight-semi: 600;
--pd-weight-bold: 700;
--pd-tracking-tight: -0.02em; /* big numbers / display */
--pd-tracking-label: 0.06em; /* uppercase eyebrows/labels */
/* ---- SPACING SCALE (>=25% jumps) ------------------------------------- */
--pd-space-1: 4px;
--pd-space-2: 8px;
--pd-space-3: 12px;
--pd-space-4: 16px;
--pd-space-5: 24px;
--pd-space-6: 32px;
--pd-space-7: 48px;
--pd-space-8: 64px;
--pd-space-9: 96px;
/* ---- RADIUS ---------------------------------------------------------- */
--pd-radius-sm: 4px; /* chips, data-ends */
--pd-radius-md: 8px; /* cards, inputs, buttons */
--pd-radius-lg: 12px; /* panels */
--pd-radius-pill: 999px;
/* ---- SHADOW (elevation only — never decoration) ---------------------- */
--pd-shadow-1: 0 1px 2px rgba(16,20,26,.06), 0 1px 1px rgba(16,20,26,.04);
--pd-shadow-2: 0 2px 8px rgba(16,20,26,.08), 0 1px 2px rgba(16,20,26,.05);
--pd-shadow-3: 0 8px 24px rgba(16,20,26,.10), 0 2px 6px rgba(16,20,26,.06);
}
/* ======================= DARK MODE ========================================
Same tokens, re-stepped for the dark ground. Applied under BOTH the OS
media query and the explicit toggle stamp. */
@media (prefers-color-scheme: dark) {
:root:where(:not([data-theme="light"])) { color-scheme: dark; }
:root:where(:not([data-theme="light"])) {
--pd-bg: #0c0e11;
--pd-surface: #14171b;
--pd-surface-2: #1c2026;
--pd-text: #f4f6f7; /* 16.58:1 on surface */
--pd-text-secondary:#aeb6bf; /* 8.77:1 */
--pd-muted: #8b939c; /* 6.21:1 on ground */
--pd-border: rgba(255,255,255,0.10);
--pd-border-strong: #636b75; /* 3.33:1 on surface */
--pd-success: #4ec07a; /* 8.42:1 on ground */
--pd-success-fill: #5aa870;
--pd-warn: #e6b34d; /* 10.05:1 */
--pd-warn-fill: #e0992a;
--pd-danger: #f08a80; /* 7.96:1 */
--pd-danger-fill: #d64545;
--pd-info: #5a8bf0;
--pd-action: var(--pd-green-400);
--pd-action-hover: var(--pd-green-300);
--pd-on-action: #0c0e11; /* dark ink on light-green action (6.69:1) */
--pd-focus: var(--pd-green-400);
--pd-link: #5aa870; /* green link on ground (6.69:1) */
--pd-cat-1: #3987e5;
--pd-cat-2: #d95926;
--pd-cat-3: #199e70;
--pd-cat-4: #c98500;
--pd-cat-5: #d55181;
--pd-cat-6: #008300;
--pd-cat-7: #9085e9;
--pd-cat-8: #e66767;
--pd-series: var(--pd-green-400);
--pd-chart-surface: #14171b;
--pd-grid: #2c2c2a;
--pd-axis: #383835;
--pd-shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30);
--pd-shadow-2: 0 2px 8px rgba(0,0,0,.48), 0 1px 2px rgba(0,0,0,.36);
--pd-shadow-3: 0 10px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--pd-bg: #0c0e11;
--pd-surface: #14171b;
--pd-surface-2: #1c2026;
--pd-text: #f4f6f7;
--pd-text-secondary:#aeb6bf;
--pd-muted: #8b939c;
--pd-border: rgba(255,255,255,0.10);
--pd-border-strong: #636b75;
--pd-success: #4ec07a;
--pd-success-fill: #5aa870;
--pd-warn: #e6b34d;
--pd-warn-fill: #e0992a;
--pd-danger: #f08a80;
--pd-danger-fill: #d64545;
--pd-info: #5a8bf0;
--pd-action: var(--pd-green-400);
--pd-action-hover: var(--pd-green-300);
--pd-on-action: #0c0e11;
--pd-focus: var(--pd-green-400);
--pd-link: #5aa870;
--pd-cat-1: #3987e5; --pd-cat-2: #d95926; --pd-cat-3: #199e70; --pd-cat-4: #c98500;
--pd-cat-5: #d55181; --pd-cat-6: #008300; --pd-cat-7: #9085e9; --pd-cat-8: #e66767;
--pd-series: var(--pd-green-400);
--pd-chart-surface: #14171b;
--pd-grid: #2c2c2a;
--pd-axis: #383835;
--pd-shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30);
--pd-shadow-2: 0 2px 8px rgba(0,0,0,.48), 0 1px 2px rgba(0,0,0,.36);
--pd-shadow-3: 0 10px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40);
}