/* =============================================================================
Plotbook Design System — colours + type
Field-ready by design.
Source of truth: PlotbookUK/Plotbook → packages/tokens/src/*.ts + brand/BRAND.md
Every value here is mirrored from @plotbook/tokens. If a value lives here it
lives in the package; if they ever disagree, the TOKEN wins.
Fonts: Inter Tight + JetBrains Mono are both free Google Fonts and are the
OFFICIAL brand families (no substitution). Loaded via a in each page's
; for production, self-host from brand/fonts/.
========================================================================== */
/* Fonts are loaded via a in each page's (see index.html) so the
request starts immediately with the preconnect hints, rather than being
discovered late inside this stylesheet via @import. */
:root {
/* ---------------------------------------------------------------------------
BASE PALETTE (packages/tokens/src/colors.ts)
navy + bone form the system. Amber is reserved. Rust is BLOCKED.
--------------------------------------------------------------------------- */
--pb-white: #FFFFFF;
--pb-black: #000000;
--pb-navy: #0B1B2B; /* Blueprint Navy — primary surface */
--pb-ink: #13283C; /* body text on bone */
--pb-steel: #7A8A99; /* secondary / dividers */
--pb-steel-muted: #5C6F82; /* tertiary text */
--pb-bone: #F4F1EA; /* paper surface */
--pb-bone-2: #EAE5D6; /* bone tint / PENDING pill bg */
--pb-paper: #FAF8F3; /* app background */
--pb-line: #D9D2C2; /* hairline / rule */
--pb-line-soft: #E5E1D5; /* softer divider */
--pb-amber: #FFB300; /* RESERVED: action · LIVE · on-site · wordmark dot */
--pb-rust: #C2410C; /* RESERVED: BLOCKED only */
/* Per-org overridable brand action ramp (never overrides status semantics) */
--pb-brand-500: #FFC733;
--pb-brand-600: #FFB300;
--pb-brand-700: #E09E00;
/* ---------------------------------------------------------------------------
STATUS — the five pills (never invent a sixth)
--------------------------------------------------------------------------- */
--pb-status-live-bg: #FFB300; --pb-status-live-fg: #0B1B2B;
--pb-status-done-bg: #1F8A5B; --pb-status-done-fg: #FFFFFF;
--pb-status-blocked-bg: #C2410C; --pb-status-blocked-fg: #FFFFFF;
--pb-status-snagging-bg: #7C5CC4; --pb-status-snagging-fg: #FFFFFF;
--pb-status-pending-bg: #EAE5D6; --pb-status-pending-fg: #13283C;
/* ---------------------------------------------------------------------------
NOTICE SURFACES — soft tinted banners (bg / border / fg)
--------------------------------------------------------------------------- */
--pb-notice-blocked-bg: #FBE9E2; --pb-notice-blocked-border: #C2410C; --pb-notice-blocked-fg: #7B2A0F;
--pb-notice-warn-bg: #FFF4D6; --pb-notice-warn-border: #FFB300; --pb-notice-warn-fg: #7A4D00;
--pb-notice-success-bg: #E2F4EB; --pb-notice-success-border: #1F8A5B; --pb-notice-success-fg: #0F4A2F;
--pb-notice-pending-bg: #FFFBEB; --pb-notice-pending-border: #E0B400; --pb-notice-pending-fg: #A0570B;
/* ---------------------------------------------------------------------------
TRADE PALETTE — categorical, "the icon is the data". Not status.
Picked by trades.sort_order; wraps. (left-spine / dot colour)
--------------------------------------------------------------------------- */
--pb-trade-0: #8A6A43; /* groundworks */
--pb-trade-1: #B5894D; /* 1st-fix carpentry */
--pb-trade-2: #2F7DB5; /* 1st-fix plumbing */
--pb-trade-3: #C9A227; /* 1st-fix electrical */
--pb-trade-4: #9A8E84; /* plastering */
--pb-trade-5: #6E8F8C; /* ames taping */
--pb-trade-6: #6B7F9E; /* painting */
--pb-trade-7: #7A4FCC; /* snagging */
/* ---------------------------------------------------------------------------
SEMANTIC SURFACE / TEXT / LINE TOKENS (packages/tokens/src/css-vars.ts)
These are the names product code actually consumes.
--------------------------------------------------------------------------- */
--bg: var(--pb-paper);
--surface: var(--pb-white);
--surface-2: var(--pb-bone);
--bone-2: var(--pb-bone-2);
--fg: var(--pb-ink); /* default body */
--fg-strong: var(--pb-navy); /* headings */
--muted: var(--pb-steel-muted);
--muted-2: var(--pb-steel);
--border: var(--pb-line);
--border-soft: var(--pb-line-soft);
/* ---------------------------------------------------------------------------
TYPE FAMILIES (packages/tokens/src/typography.ts)
Inter Tight = narrative + UI. JetBrains Mono = DATA ONLY.
A timestamp set in Inter Tight is a bug.
--------------------------------------------------------------------------- */
--font-sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800; /* wordmark only */
--tracking-tightest: -0.04em;
--tracking-tighter: -0.03em;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-wider: 0.08em; /* mono eyebrow labels */
/* ---------------------------------------------------------------------------
RADII (packages/tokens/src/radii.ts)
--------------------------------------------------------------------------- */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;
/* ---------------------------------------------------------------------------
ELEVATION (packages/tokens/src/shadows.ts)
Navy-tinted shadows — rgba(13,40,60,…), never generic grey. Mostly flat.
--------------------------------------------------------------------------- */
--shadow-rest: none;
--shadow-raised: 0 1px 2px rgba(13, 40, 60, 0.06);
--shadow-sticky: 0 6px 8px -6px rgba(13, 40, 60, 0.08);
--shadow-popover: 0 8px 24px rgba(13, 40, 60, 0.12);
--shadow-modal: 0 24px 64px rgba(13, 40, 60, 0.24);
/* ---------------------------------------------------------------------------
SPACING + DENSITY (packages/tokens/src/spacing.ts)
comfortable = web desk · field = painter on-site (gloves, low light)
--------------------------------------------------------------------------- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
/* comfortable (web) */
--density-comfortable-base: 8px;
--density-comfortable-row: 32px;
--density-comfortable-body: 14px;
--density-comfortable-hit: 36px;
/* field (painter) */
--density-field-base: 12px;
--density-field-row: 56px;
--density-field-body: 16px;
--density-field-hit: 56px;
/* ---------------------------------------------------------------------------
MOTION (packages/tokens/src/motion.ts)
--------------------------------------------------------------------------- */
--duration-base: 150ms; /* hover, tab switch, toggle */
--duration-page: 240ms; /* drawer, dialog, lightbox */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entrance */
--ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* exit */
}
@media (prefers-reduced-motion: reduce) {
:root { --duration-base: 0ms; --duration-page: 0ms; }
}
/* =============================================================================
SEMANTIC TYPE RAMP — 10 tokens, no other size/weight/line-height exists.
Use as classes (.pb-h1) or copy the declarations.
========================================================================== */
.pb-display-xl { font-family: var(--font-sans); font-weight: 700; font-size: 56px; line-height: 56px; letter-spacing: var(--tracking-tightest); color: var(--fg-strong); }
.pb-display { font-family: var(--font-sans); font-weight: 700; font-size: 40px; line-height: 44px; letter-spacing: var(--tracking-tightest); color: var(--fg-strong); }
.pb-h1 { font-family: var(--font-sans); font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: var(--tracking-tighter); color: var(--fg-strong); }
.pb-h2 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.pb-h3 { font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 22px; letter-spacing: var(--tracking-snug); color: var(--fg-strong); }
.pb-body { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--fg); }
.pb-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: 0; color: var(--fg); }
/* DATA family — JetBrains Mono 500 only. */
.pb-label { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--muted); }
.pb-data { font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 18px; letter-spacing: 0; color: var(--fg); }
.pb-data-sm { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0; color: var(--fg); }
/* =============================================================================
STATUS PILL — the only way to render a status. font-mono, uppercase, full radius.
========================================================================== */
.pb-pill {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-weight: 600;
font-size: 12px; letter-spacing: var(--tracking-wider); text-transform: uppercase;
padding: 2px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.pb-pill--live { background: var(--pb-status-live-bg); color: var(--pb-status-live-fg); }
.pb-pill--done { background: var(--pb-status-done-bg); color: var(--pb-status-done-fg); }
.pb-pill--blocked { background: var(--pb-status-blocked-bg); color: var(--pb-status-blocked-fg); }
.pb-pill--snagging { background: var(--pb-status-snagging-bg); color: var(--pb-status-snagging-fg); }
.pb-pill--pending { background: var(--pb-status-pending-bg); color: var(--pb-status-pending-fg); }