/* ========================================================================= Design tokens — Pendulum Power System Studies ========================================================================= Every colour here is lifted verbatim from one of the two existing G5/5 stylesheets. Nothing is invented, so the hub, the P28 calculator and the G5/5 calculator share one palette by construction rather than by eye. [web] Projects/G5 Calculator/g55_webapp/assets/css/stylesv2.css [pdf] services/stage2-pdf-renderer/src/templates/report_paged.css The source of each value is marked. Where the two stylesheets disagree on a semantic colour (pass green, fail red) both are kept: the [web] value for solid fills, the [pdf] value for text, because the PDF palette already carries darker text variants that meet WCAG AA on white. What is deliberately NOT inherited from [web]: the 2019-era treatment above the palette — the blue glow `box-shadow: 0 0 10px #346EB6`, the absent spacing scale, the flat type hierarchy. Those are modernised here. See docs/pre_plan.md Decision 3. This file is authored to drop into the G5/5 webapp unchanged when the shell is back-ported. Do not add anything project-specific to it. Dark mode is deferred to post-v1.0 per docs/css_branding.md. The token structure supports adding it later without touching component CSS. ========================================================================= */ :root { /* --- Brand ------------------------------------------------------------ */ --brand: #346EB6; /* [web] primary blue — buttons, links, headings */ --brand-hover: #28589B; /* [web] .button:hover */ --brand-deep: #1F3F7A; /* [pdf] --brand */ --brand-ink: #122038; /* [pdf] --brand-deep / --fg */ --brand-accent: #1F3B66; /* [web] deep navy accent */ --brand-wash: #F3F5F8; /* [web] .container background */ --brand-wash-2: #F0F4F8; /* [web] .result-message background */ --brand-wash-3: #F8FBFF; /* [web] pale blue tint */ --brand-wash-4: #ECF0F8; /* [web] pale blue tint */ /* --- Neutrals --------------------------------------------------------- Cool-biased rather than pure grey, so they sit under the brand blue without reading as a separate temperature. All from [web] or [pdf]. */ --ink: #122038; /* [pdf] --fg — body text */ --ink-strong: #111827; /* [web] darkest text */ --ink-2: #1F2937; /* [web] secondary text */ --ink-3: #1B1B1B; /* [web] near-black, used on contact widget */ --muted: #546E7A; /* [pdf] --muted */ --muted-2: #6B7280; /* [web] muted grey */ --pending: #607D8B; /* [pdf] --pending */ --line: #D7DCE4; /* [pdf] --line — default border */ --line-soft: #E7ECF3; /* derived: lighter rule for internal dividers */ --line-input: #C9CED6; /* [web] .pdf-helper-field input border */ --surface: #FFFFFF; /* [web] card white */ --surface-sunk: #F9F9F9; /* [web] body background */ --surface-soft: #F7F9FC; /* [pdf] --bg-soft */ --surface-muted: #F2F2F2; /* [web] hover on white buttons */ --footer-bar: #1C1C1C; /* [pdf] --footer-bar */ /* --- Semantic: pass / warn / fail -------------------------------------- Fills use the [web] values so buttons and banners match the existing calculator exactly. Text uses the [pdf] variants, which are dark enough to clear WCAG AA (4.5:1) on white — the fill colours are not. */ --pass: #1D976C; /* [pdf] --pass */ --pass-fill: #28A745; /* [web] .button.green — solid fills only */ --pass-bg: #E2F5E7; /* [pdf] --pass-bg */ --pass-bg-2: #E6F7EE; /* [web] pale green */ --pass-text: #1F7034; /* [pdf] --pass-text — 5.6:1 on white */ --warn: #96660D; /* derived from the brand's warm complement */ --warn-bg: #FBF0DC; --warn-text: #7A5309; --fail: #A71D22; /* [web] .button.red / .error */ --fail-alt: #C62828; /* [pdf] --fail */ --fail-bg: #FDE5E5; /* [pdf] --fail-bg */ --fail-bg-2: #FDEAEA; /* [web] pale red */ --fail-bg-3: #FFDEDE; /* [web] pale red */ --fail-border: #F2C0C0; /* [web] pale red border */ --fail-text: #8A1F1F; /* [pdf] --fail-text — 8:1 on white */ /* --- Typography ------------------------------------------------------- Poppins is the G5/5 brand face and is kept. [web] loads it as `font-family: Poppins, sans-serif` with no fallback stack and no self-hosting; here it gets a real stack so a failed font load degrades to a similar geometric sans rather than to Times. */ --font-body: Poppins, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-body); --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace; /* Type scale, 1.2 ratio from a 1rem base, rounded to sensible values. */ --text-xs: 0.75rem; /* 12px — labels, footnotes */ --text-sm: 0.875rem; /* 14px — captions, table cells */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — lead paragraphs, buttons ([web] .button) */ --text-lg: 1.35rem; /* 21.6px — h3 */ --text-xl: 1.625rem; /* 26px — h2 */ --text-2xl: 2rem; /* 32px — h1 ([web] .heading) */ --text-3xl: 2.5rem; /* 40px — hero on wide viewports */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-body: 1.65; --weight-regular: 400; --weight-medium: 500; /* [web] .button font-weight */ --weight-semi: 600; /* [web] .heading font-weight */ --weight-bold: 700; --tracking-tight: -0.015em; --tracking-label: 0.06em; /* Comfortable reading measure for long-form guide content. */ --measure: 68ch; /* --- Spacing ---------------------------------------------------------- 4px base scale. [web] has no scale at all — spacing is ad-hoc rem values per rule — so this is new and is the main reason the modernised shell reads as tidier than the original. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* --- Radius ----------------------------------------------------------- [web] uses 6px (small inputs), 8px (buttons, inputs), 12px (containers), 16px (contact sheet), 999px (pill). Kept, plus a named scale. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* --- Elevation -------------------------------------------------------- This is the clearest break from [web], which uses `box-shadow: 0 0 10px #346EB6` — a saturated blue glow on every card. Replaced with neutral, directional shadows tinted with the brand ink so cards read as lifted rather than as outlined in blue. */ --shadow-xs: 0 1px 2px rgba(18, 32, 56, 0.05); --shadow-sm: 0 1px 2px rgba(18, 32, 56, 0.06), 0 2px 8px rgba(18, 32, 56, 0.08); /* [web] pdf-helper-panel */ --shadow-md: 0 2px 4px rgba(18, 32, 56, 0.05), 0 8px 24px -6px rgba(31, 63, 122, 0.14); --shadow-lg: 0 4px 8px rgba(18, 32, 56, 0.06), 0 18px 36px -10px rgba(31, 63, 122, 0.20); --shadow-focus: 0 0 0 3px rgba(52, 110, 182, 0.35); /* --- Motion ----------------------------------------------------------- [web] uses `transition: background-color 0.3s ease` on buttons and 180-200ms on the contact widget. Standardised on the faster end. */ --transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1); --transition-base: 180ms cubic-bezier(0.2, 0, 0.2, 1); --transition-slow: 260ms cubic-bezier(0.2, 0, 0.2, 1); /* --- Layout ------------------------------------------------------------ */ --container-max: 1120px; --container-narrow: 760px; /* long-form guide content */ --container-wide: 1280px; --gutter: var(--space-6); --header-height: 72px; /* --- Z-index ----------------------------------------------------------- */ --z-sticky: 100; --z-header: 200; --z-backdrop: 9998; --z-sheet: 9999; --z-fab: 10000; /* [web] .contact-fab */ --z-consent: 10001; /* must sit above the contact FAB */ } /* Narrower gutters on small viewports. Mobile-first per css_branding.md. */ @media (max-width: 640px) { :root { --gutter: var(--space-4); --text-3xl: 2rem; --text-2xl: 1.625rem; } } /* Respect a stated preference for reduced motion everywhere. */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } }