/* ========================================================================== Reforged Compounds — tokens.css THE SINGLE FILE YOU EDIT FOR THIS CLIENT Conforms to: TRP Replication Blueprint, page 22 (Design Token Architecture) Forged from Forge Orange #FF5A00 and Steel Gray #2A2D31 on a dark shell. Every value below is WCAG-validated — ratios noted inline, computed not estimated. Do not change a value without re-running the check in §Verify. Structural block is lifted verbatim from the agency scaffold, which took it from TRP Replication Blueprint page 03. The Elementor templates were designed to those numbers. Changing one reflows templates that look fine until a tablet opens them. ========================================================================== */ :root { /* ---- Brand ------------------------------------------------------------ Forge Orange is the identity and it is unusable as text on white at 3.13:1. On the dark shell it reaches 5.74:1 and carries everything. Two derived tokens exist so nobody reaches for an inline hex: --brand-accent-ink for the rare light surface, and --brand-ink-on-accent for labels sitting on an orange fill. */ --brand-primary: #FF5A00; /* primary CTA fill 5.74:1 on shell ✅ */ --brand-primary-hover: #FF7A33; /* CTA hover, brightens on dark 6.91:1 ✅ */ --brand-secondary: #2A2D31; /* STEEL GRAY — bands, header, footer */ --brand-accent: #FF5A00; /* FORGE ORANGE — dark surfaces only 5.74:1 on shell ✅ · 3.13:1 on white ❌ */ --brand-accent-ink: #AD3E00; /* same hue darkened for light surfaces 6.06:1 on white ✅ */ --brand-ink-on-accent: #15171A; /* label colour on any orange fill 5.74:1 ✅ · never use white here */ /* ---- Surfaces --------------------------------------------------------- Dark shell, dark content. This is the deliberate inversion of the source scaffold, which ran dark chrome over a light catalog body. */ --brand-bg: #15171A; /* page background */ --brand-surface: #1E2125; /* cards, panels 13.41:1 text ✅ */ --brand-surface-alt: #2A2D31; /* STEEL GRAY bands 11.48:1 text ✅ */ --brand-surface-deep: #0F1113; /* deepest elevation 15.70:1 text ✅ */ --brand-border: #33373D; /* dividers, input borders */ --brand-media-plate: #FFFFFF; /* plate behind product images. White keeps studio-backdrop vial renders seamless. Flip to #1E2125 if the renders go dark. */ /* ---- Text ------------------------------------------------------------- */ --brand-text: #E8EAED; /* body copy 14.90:1 ✅ */ --brand-text-muted: #9AA3AE; /* captions, meta, RUO fine print 7.03:1 on shell ✅ · 5.42:1 on steel ✅ */ --brand-text-inverse: #15171A; /* text on orange or on a light surface */ --brand-heading: #F2F4F6; /* headings 16.29:1 ✅ */ /* ---- Type ------------------------------------------------------------- Two families carrying four slots, same collapse as the source scaffold. The 40/35/30/25/20/16 scale below is STRUCTURAL — do not change. */ --brand-font-display: "Montserrat", system-ui, sans-serif; /* 800 wt */ --brand-font-heading: "Montserrat", system-ui, sans-serif; /* 700 wt */ --brand-font-body: "Inter", system-ui, sans-serif; /* 400/500 */ --brand-font-accent: "Inter", system-ui, sans-serif; /* 600 wt */ /* ---- Semantic states -------------------------------------------------- Lightened from the source values, which were tuned for text on white and go muddy on a dark shell. */ --brand-success: #3FBF7F; --brand-warning: #E0A106; --brand-error: #FF6B61; /* ========================================================================== STRUCTURAL — DO NOT CHANGE PER CLIENT ========================================================================== */ /* Layout — Blocksy global */ --rfg-container-max: 1290px; --rfg-container-narrow: 750px; --rfg-wide-offset: 130px; --rfg-content-space-desk: 60px; --rfg-content-space-tab: 60px; --rfg-content-space-mob: 50px; /* Breakpoints — Elementor kit, mirrored so the numbers exist once */ --rfg-bp-desktop: 1025px; --rfg-bp-tablet: 768px; /* Type scale — 40/35/30/25/20/16, weight n7, line-height 1.5 */ --rfg-h1: 40px; --rfg-h2: 35px; --rfg-h3: 30px; --rfg-h4: 25px; --rfg-h5: 20px; --rfg-h6: 16px; --rfg-body-size: 16px; --rfg-body-lh: 1.65; --rfg-heading-lh: 1.5; --rfg-btn-size: 15px; --rfg-breadcrumb-size: 12px; /* Components */ --rfg-btn-min-height: 40px; --rfg-btn-padding: 5px 20px; --rfg-input-height: 40px; --rfg-textarea-height: 170px; --rfg-field-radius: 3px; --rfg-border-width: 1px; } /* ========================================================================== THE ORANGE RULES orange on the dark shell or on a card → --brand-accent (#FF5A00) orange on any light surface → --brand-accent-ink (#AD3E00) a label sitting on an orange fill → --brand-ink-on-accent (#15171A) never white text on any orange fill → maximum is 2.90:1, fails AA One caveat that is not in the source scaffold. Forge Orange on Steel Gray is 4.42:1. That clears AA for large text at 18.66px bold or 24px regular, and it fails for body copy. Orange on a steel band is for headings, icons and rules. Body copy on steel is --brand-text. ========================================================================== */ /* ========================================================================== VERIFY — paste into devtools console on home, shop, product, cart, checkout, my-account and the gate. Literals should be near zero. document.getElementById('wp-custom-css')?.textContent .match(/#[0-9a-f]{3,8}|rgba?\(/gi); [...document.styleSheets] .filter(s => /elementor-post-\d+/.test(s.ownerNode?.id || '')) .map(s => { let t=''; for (const r of s.cssRules) t += r.cssText; return { id: s.ownerNode.id, literals: (t.match(/#[0-9a-f]{3,8}|rgba?\(/gi)||[]).length, vars: (t.match(/var\(--/g)||[]).length }; }); ========================================================================== */