/* ========================================================================== FORCE PR — 01 TOKENS The single source of truth for every design value in the system. Documentation: /docs/DESIGN-SYSTEM-V1.md RULES 1. No other file in this theme may contain a raw hex colour, a raw px font size, or a raw spacing number. Everything references a token here. 2. Tokens that WordPress also needs to know about (colour palette, font sizes, spacing sizes, content width) are declared in theme.json and *aliased* here via var(--wp--preset--*) with a literal fallback. The fallback is what makes this file work outside WordPress — in preview.html, and safely alongside the legacy theme during migration. 3. Tokens WordPress has no concept of (glow, gradients, motion, surfaces, measures, radii, borders) are declared here only. ========================================================================== */ /* Declare cascade order once, before anything else. Utilities beat components without needing !important. */ @layer force.tokens, force.base, force.layout, force.components, force.utilities; @layer force.tokens { :root { /* ==================================================================== 1. COLOUR — PRIMITIVES The five values below are the existing FORCE PR brand, carried over from the Phase 0 audit unchanged. Everything else is derived. ==================================================================== */ /* Brand — preserved exactly as found on the live site */ --force-color-ink: var(--wp--preset--color--ink, #1c1c23); /* 277 uses in live content */ --force-color-white: var(--wp--preset--color--white, #ffffff); /* 405 uses */ --force-color-magenta: var(--wp--preset--color--magenta, #ff0ff5); /* 77 uses — primary accent */ --force-color-mint: var(--wp--preset--color--mint, #00ffc3); /* 18 uses — secondary accent */ --force-color-paper: var(--wp--preset--color--paper, #f5f5f5); /* 21 uses — light surface */ /* Derived darks — same hue family as --force-color-ink */ --force-color-ink-sunken: var(--wp--preset--color--ink-sunken, #14141a); --force-color-ink-elevated: var(--wp--preset--color--ink-elevated, #26262f); /* Derived accents — only to serve the sanctioned gradient families. Hue walks a single arc: mint 166° → blue 225° → purple 272° → magenta 301°. This is deliberately NOT a rainbow; it is one continuous sweep. */ --force-color-purple: var(--wp--preset--color--purple, #9b2bff); --force-color-blue: var(--wp--preset--color--blue, #2b6bff); /* ==================================================================== 2. COLOUR — SEMANTIC Components reference these, never the primitives above. ==================================================================== */ /* Backgrounds */ --force-bg: var(--force-color-ink); --force-bg-sunken: var(--force-color-ink-sunken); --force-bg-elevated: var(--force-color-ink-elevated); --force-bg-inverse: var(--force-color-white); --force-bg-inverse-alt: var(--force-color-paper); /* Text on dark (the default mode) */ --force-text: var(--force-color-white); /* 16.9:1 on ink — AAA */ --force-text-muted: #b8b8c4; /* 8.6:1 on ink — AAA */ --force-text-subtle: #8a8a99; /* 5.0:1 on ink — AA */ /* Text on light (for inverse sections) */ --force-text-inverse: var(--force-color-ink); /* 16.9:1 on white — AAA */ --force-text-inverse-muted: #3a3a45; /* 11.2:1 on white — AAA */ /* Accents, semantic */ --force-accent: var(--force-color-magenta); /* action, CTA, brand energy */ --force-accent-secondary: var(--force-color-mint); /* data, detail, technology */ --force-accent-on-light: var(--force-color-purple); /* 5.0:1 on white — the accent that is safe as text on light */ /* Surfaces — translucent, for layering over gradients and imagery */ --force-surface: rgb(255 255 255 / 0.03); --force-surface-hover: rgb(255 255 255 / 0.06); --force-surface-active: rgb(255 255 255 / 0.09); --force-surface-accent: rgb(255 15 245 / 0.08); --force-surface-accent-2: rgb(0 255 195 / 0.08); --force-surface-overlay: rgb(20 20 26 / 0.72); /* image overlays, modals */ /* State */ --force-focus: var(--force-color-mint); /* mint never competes with the magenta CTA */ --force-success: #00d19a; --force-error: #ff4d6d; --force-warning: #ffc247; /* ==================================================================== 3. BORDERS Low contrast by default. Accent borders signal meaning, not decoration. ==================================================================== */ --force-border-width: 1px; --force-border-width-thick: 2px; --force-border-subtle: var(--force-border-width) solid rgb(255 255 255 / 0.07); --force-border: var(--force-border-width) solid rgb(255 255 255 / 0.12); --force-border-strong: var(--force-border-width) solid rgb(255 255 255 / 0.20); --force-border-accent: var(--force-border-width) solid var(--force-accent); --force-border-accent-2: var(--force-border-width) solid var(--force-accent-secondary); /* Inverse (light sections) */ --force-border-inverse: var(--force-border-width) solid rgb(28 28 35 / 0.12); /* ==================================================================== 4. RADIUS Deliberately restrained. The live site is square-edged and that is part of the look. Hard geometry reads technical and confident; rounding everything is the fastest route to generic SaaS. ==================================================================== */ --force-radius-none: 0; --force-radius-xs: 2px; /* inputs, chips */ --force-radius-sm: 4px; /* buttons, cards — the default */ --force-radius-md: 8px; /* media, larger panels */ --force-radius-pill: 999px; /* badges only */ /* ==================================================================== 5. TYPOGRAPHY — FAMILIES Two families, four weights. See assets/fonts/README.md. latin-ext is REQUIRED for Polish diacritics (ą ć ę ł ń ó ś ź ż). ==================================================================== */ --force-font-display: var(--wp--preset--font-family--display, "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif); --force-font-body: var(--wp--preset--font-family--body, "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif); --force-weight-regular: 400; --force-weight-semibold: 600; --force-weight-bold: 700; /* ==================================================================== 6. TYPOGRAPHY — FLUID SCALE Ratio ≈ 1.333 (perfect fourth) at desktop, compressing on small screens. clamp() removes the need for the legacy six banded media queries entirely, and fixes the audit findings that h3/h4 never scaled down and h1 floored at 55px (DESIGN-AUDIT.md R-2, R-3). ==================================================================== */ --force-text-display: var(--wp--preset--font-size--display, clamp(3rem, 9vw, 7.5rem)); /* 48 → 120 */ --force-text-h1: var(--wp--preset--font-size--h-1, clamp(2.25rem, 5.5vw, 4.375rem)); /* 36 → 70 */ --force-text-h2: var(--wp--preset--font-size--h-2, clamp(1.875rem, 4vw, 3.4375rem)); /* 30 → 55 */ --force-text-h3: var(--wp--preset--font-size--h-3, clamp(1.5rem, 2.6vw, 2.1875rem)); /* 24 → 35 */ --force-text-h4: var(--wp--preset--font-size--h-4, clamp(1.25rem, 1.9vw, 1.625rem)); /* 20 → 26 */ --force-text-eyebrow: var(--wp--preset--font-size--eyebrow, clamp(0.75rem, 0.9vw, 0.8125rem)); /* 12 → 13 */ --force-text-body-lg: var(--wp--preset--font-size--body-large, clamp(1.0625rem, 1.4vw, 1.1875rem)); /* 17 → 19 */ --force-text-body: var(--wp--preset--font-size--body, clamp(1rem, 1.1vw, 1.0625rem)); /* 16 → 17 */ --force-text-body-sm: var(--wp--preset--font-size--body-small, 0.9375rem); /* 15 */ --force-text-caption: var(--wp--preset--font-size--caption, 0.8125rem); /* 13 */ --force-text-nav: 1.0625rem; /* 17 */ --force-text-button: 1rem; /* 16 */ /* ==================================================================== 7. TYPOGRAPHY — LINE HEIGHT Tight on display sizes (1.1 is loose at 70px+), generous on body (Polish runs long). ==================================================================== */ --force-leading-display: 0.92; --force-leading-h1: 1.02; --force-leading-h2: 1.05; --force-leading-h3: 1.12; --force-leading-h4: 1.2; --force-leading-tight: 1.3; --force-leading-body: 1.7; --force-leading-lead: 1.65; --force-leading-none: 1; /* ==================================================================== 8. TYPOGRAPHY — TRACKING Negative on large uppercase condensed display type; positive on small uppercase UI. The live site has every letter-spacing option empty, which is why 70px headings currently read loose. ==================================================================== */ --force-tracking-display: -0.02em; --force-tracking-h1: -0.015em; --force-tracking-h2: -0.01em; --force-tracking-h3: -0.005em; --force-tracking-none: 0; --force-tracking-nav: 0.06em; --force-tracking-button: 0.08em; --force-tracking-eyebrow: 0.16em; /* ==================================================================== 9. MEASURE Replaces `line_break_positions` — the legacy attribute that forced
at fixed word indices on 87 headings (WPBAKERY-DEPENDENCIES §7). ==================================================================== */ --force-measure-display: 18ch; --force-measure-heading: 26ch; --force-measure-lead: 48ch; --force-measure-body: 68ch; /* ==================================================================== 10. SPACING An 8-point scale. Replaces 821 hand-tuned legacy values: 128 vc_empty_space heights + 349 .vc_custom_* paddings + 344 column_responsive_padding_* values. ==================================================================== */ --force-space-1: 0.25rem; /* 4 */ --force-space-2: 0.5rem; /* 8 */ --force-space-3: 0.75rem; /* 12 */ --force-space-4: 1rem; /* 16 */ --force-space-5: 1.5rem; /* 24 */ --force-space-6: 2rem; /* 32 */ --force-space-7: 2.5rem; /* 40 */ --force-space-8: 3rem; /* 48 */ --force-space-9: 4rem; /* 64 */ --force-space-10: 6rem; /* 96 */ --force-space-11: 8rem; /* 128 */ /* Fluid section rhythm. Legacy rows used 90px and 100px padding. */ --force-space-section: clamp(4rem, 8vw, 6rem); /* 64 → 96 — standard section */ --force-space-section-lg: clamp(5rem, 10vw, 8rem); /* 80 → 128 — emphasised band */ --force-space-section-xl: clamp(6rem, 12vw, 10rem); /* 96 → 160 — hero */ /* Gutters */ --force-gutter-sm: var(--force-space-4); --force-gutter: 1.875rem; /* 30px — matches the legacy grid gutter exactly */ --force-gutter-lg: var(--force-space-8); /* Page edge padding */ --force-gutter-page: clamp(1.25rem, 5vw, 3rem); /* ==================================================================== 11. CONTAINERS 1300px is the existing content width (qodef_content_width). Preserved so the rebuild keeps the site's proportions. ==================================================================== */ --force-container: var(--wp--style--global--content-size, 1300px); --force-container-wide: var(--wp--style--global--wide-size, 1600px); --force-container-narrow: 860px; --force-container-text: var(--force-measure-body); /* ==================================================================== 12. SHADOWS The legacy site has none — the only box-shadow found is explicitly disabled. These express hierarchy, not decoration. On dark surfaces shadow is nearly invisible, so elevation there is carried by --force-bg-elevated + --force-shadow-inset instead. ==================================================================== */ --force-shadow-none: none; --force-shadow-sm: 0 1px 2px rgb(10 10 14 / 0.28); --force-shadow-md: 0 6px 18px rgb(10 10 14 / 0.22); --force-shadow-lg: 0 18px 48px rgb(10 10 14 / 0.34); --force-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.06); /* ==================================================================== 13. GLOW — the missing brand dimension The brand line is "among millions of neon signs, only one stands out", yet the live CSS has no glow anywhere. These deliver it. BUDGET: ~2 strong glowing elements per viewport. Never on body text. ==================================================================== */ --force-glow-accent: 0 0 12px rgb(255 15 245 / 0.55), 0 0 32px rgb(255 15 245 / 0.22); --force-glow-accent-soft: 0 0 24px rgb(255 15 245 / 0.18); --force-glow-accent-2: 0 0 12px rgb(0 255 195 / 0.50), 0 0 32px rgb(0 255 195 / 0.20); --force-glow-accent-2-soft: 0 0 24px rgb(0 255 195 / 0.16); /* Edge glow — evolves the existing `border: 7px solid #ff0ff5` neon frame */ --force-glow-edge: 0 0 0 1px rgb(255 15 245 / 0.50), 0 0 18px rgb(255 15 245 / 0.25); --force-glow-edge-2: 0 0 0 1px rgb(0 255 195 / 0.45), 0 0 18px rgb(0 255 195 / 0.22); /* Focus ring — two-tone so it reads on both dark and light surfaces */ --force-focus-ring: 0 0 0 2px var(--force-bg), 0 0 0 4px var(--force-focus); --force-focus-ring-inverse: 0 0 0 2px var(--force-bg-inverse), 0 0 0 4px var(--force-accent-on-light); /* ==================================================================== 14. GRADIENTS One continuous hue arc, four sanctioned families. No rainbows. Reserved for: hero backgrounds, selected CTA bands, decorative glow, selected cards, interactive states, signature elements. ==================================================================== */ --force-gradient-ink: linear-gradient(160deg, var(--force-color-ink-elevated) 0%, var(--force-color-ink-sunken) 100%); --force-gradient-magenta-purple: linear-gradient(100deg, var(--force-color-magenta) 0%, var(--force-color-purple) 100%); --force-gradient-magenta-blue: linear-gradient(100deg, var(--force-color-magenta) 0%, var(--force-color-blue) 100%); --force-gradient-magenta-mint: linear-gradient(100deg, var(--force-color-magenta) 0%, var(--force-color-mint) 100%); --force-gradient-purple-blue: linear-gradient(100deg, var(--force-color-purple) 0%, var(--force-color-blue) 100%); /* Ambient light washes — sit behind content, never interactive */ --force-gradient-glow-accent: radial-gradient(closest-side, rgb(255 15 245 / 0.28), rgb(255 15 245 / 0) 70%); --force-gradient-glow-mint: radial-gradient(closest-side, rgb(0 255 195 / 0.22), rgb(0 255 195 / 0) 70%); /* Hairline rule — gives mint a recurring, legitimate home */ --force-gradient-rule: linear-gradient(90deg, var(--force-color-magenta) 0%, var(--force-color-mint) 100%); /* Image scrim — keeps white text legible over photography */ --force-gradient-scrim: linear-gradient(180deg, rgb(20 20 26 / 0) 0%, rgb(20 20 26 / 0.55) 55%, rgb(20 20 26 / 0.88) 100%); /* ==================================================================== 15. MOTION Replaces 101 ad-hoc legacy animations, 47 of which were bounce*. No bounce anywhere in this system — it reads consumer, not premium. ==================================================================== */ --force-duration-fast: 150ms; --force-duration: 250ms; --force-duration-slow: 400ms; --force-duration-slower: 700ms; --force-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --force-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --force-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --force-reveal-distance: 12px; --force-stagger: 60ms; /* Signature cursor */ --force-cursor-duration: 1.1s; --force-cursor-offset: 0.08em; /* ==================================================================== 16. Z-INDEX A short, named ladder. No magic numbers in components. ==================================================================== */ --force-z-below: -1; --force-z-base: 0; --force-z-raised: 10; --force-z-sticky: 100; --force-z-header: 200; --force-z-overlay: 300; --force-z-modal: 400; } /* ====================================================================== 17. INVERSE CONTEXT Put `.force-inverse` on any container to flip the semantic colour tokens to the light-surface set. Components need no extra rules: they reference semantic tokens, which are redefined here. ====================================================================== */ .force-inverse, .is-style-force-inverse { --force-bg: var(--force-bg-inverse); --force-bg-sunken: var(--force-bg-inverse-alt); --force-bg-elevated: var(--force-color-white); --force-text: var(--force-text-inverse); --force-text-muted: var(--force-text-inverse-muted); --force-text-subtle: var(--force-text-inverse-muted); /* On light surfaces magenta is only 3.2:1 — not safe as text. Purple (5.0:1) takes over as the text-bearing accent. */ --force-accent: var(--force-accent-on-light); --force-surface: rgb(28 28 35 / 0.03); --force-surface-hover: rgb(28 28 35 / 0.06); --force-surface-active: rgb(28 28 35 / 0.09); --force-border-subtle: var(--force-border-width) solid rgb(28 28 35 / 0.07); --force-border: var(--force-border-inverse); --force-border-strong: var(--force-border-width) solid rgb(28 28 35 / 0.20); --force-focus-ring: var(--force-focus-ring-inverse); /* Glow is invisible on light. Disable it rather than let it muddy. */ --force-glow-accent: none; --force-glow-accent-soft: none; --force-glow-accent-2: none; --force-shadow-inset: none; color: var(--force-text); background-color: var(--force-bg); } }