/* ========================================================================== thoughtz.com — design tokens -------------------------------------------------------------------------- ⚠️ THIS IS A DERIVED SUBSET OF THE PRODUCT'S theme.css — IT IS NOT A FOURTH COPY OF IT, AND IT MUST NOT BECOME ONE. App/TMS/thoz each carry a full 700-line theme.css, kept in sync BY HAND. Adding the website as a fourth hand-synced copy would make every token change a four-place edit, and a marketing site needs none of what makes those files long (Bootstrap retints, nav tokens, form tokens, chart tokens). So: the PRIMITIVE VALUES below are copied verbatim from TMS/public/src/stylesheets/theme.css and must match it exactly. The SEMANTIC layer is this site's own and is deliberately much smaller. If a primitive changes in the product, change it here too — that is the one sync obligation. Verified against TMS/public/src/stylesheets/theme.css on 2026-09-14. Authority for how these are used: STYLE_GUIDE.md. ========================================================================== */ :root { /* ---- primitives: orange, the action ramp ------------------------------- ⚠️ The accent carries WHITE lettering at 2.80:1, below every WCAG threshold. That is Glen's explicit, reaffirmed decision — do NOT "fix" it to ink. It is managed by STYLE_GUIDE.md §3's five rules: · sentence-bearing fills use action-600, not action-500 · small lettering uses action-700 · a 16px/600 floor on any text sitting on an accent fill · a 1px action-700 definition border on light grounds · filled icons at >=18px Dropping any one of those ships unreadable text. */ --thz-action: #f97316; /* accent-500 — the primary fill */ --thz-action-600: #e2620f; /* hover, and any fill carrying a sentence */ --thz-action-700: #c2540b; /* pressed fill, definition border, AND the only orange allowed as lettering on a light ground (4.60:1) */ /* ⚠️ 800 AND 900 EXIST BECAUSE THE ACTION FILL MOVED DOWN THE RAMP (Q-237, 2026-09-18). A button label is 16px/600 - NORMAL text to WCAG, needing 4.5:1, not the 3:1 that covers a large heading. accent-500 was 2.80:1 and accent-600 only 3.51:1, so neither reaches it; accent-700 does, at 4.60:1. Making 700 the DEFAULT left hover and pressed with nowhere darker to go, which is the whole reason these two were added rather than the fill simply being changed. White on each: 800 = 5.84:1, 900 = 7.82:1. */ --thz-action-800: #a8480a; /* hover fill, AND accent lettering on light */ --thz-action-900: #8a3a00; /* pressed fill */ --thz-action-050: #fde5d3; /* chip fill and wash */ /* ---- primitives: ink, the structure ----------------------------------- */ --thz-accent-700: #1a1a1a; /* ink — headings, chrome, dark bands */ --thz-accent-600: #33302a; /* lifted ink — hover on dark surfaces */ --thz-accent-400: #5a5647; /* warm mid — carries white AND reads on bone */ --thz-accent-300: #4a4738; /* body ink — emphasis text */ --thz-accent-050: #ede9e1; /* pale warm wash */ --thz-accent-deep: #7a3d13; /* accent-ink — chip text */ /* ---- primitives: brand surfaces are GREY, a separate family ----------- ⚠️ Brand SURFACE and brand LETTERING are two different things here. --thz-brand-* is a fill; type that should read as the brand uses --thz-text-brand, which is ink. Do not tidy the two together. ⚠️ brand-400 takes WHITE lettering at 3.32:1, below AA, by Glen's explicit call (Q-046). Read --thz-text-on-brand-light, never white directly, so reversing it stays a one-line change. */ --thz-brand-700: #5d5d5d; /* dark silver — the brand surface */ --thz-brand-600: #767676; /* lifted — hover on a brand surface */ --thz-brand-400: #809091; /* slate — the light brand surface */ /* ---- primitives: paper, ink, quiet ------------------------------------ */ --thz-ink: #3d3a34; /* body text — 11.33:1 on white */ --thz-paper: #f5f2ec; /* bone — the page ground */ --thz-white: #ffffff; /* ⚠️ Also darkened from the product's #6e6a61, same reason and same evidence: 5.39:1 on white but 4.45 on the wash ground, which this site uses for whole bands of muted copy. #67635a measures white 5.98 / bone 5.36 / wash 4.94 / sand 4.64 — AA on every ground here. Website-only, like the value above. */ --thz-caption: #67635a; --thz-caption-light: #888681; /* ---- primitives: sand, the quiet callout ------------------------------ */ --thz-sand: #efe1c8; --thz-sand-alt: #e5d8c0; /* hover — DARKER, not lifted */ --thz-sand-ink: #7a4a15; /* the lettering that goes on sand */ --thz-sand-edge: #ddcba9; /* 1px edge — DECORATIVE ONLY, 1.23:1 */ /* ---- primitives: state ------------------------------------------------ */ --thz-success: #0f7a4f; /* 5.36:1 with white */ --thz-danger: #b3261e; /* 6.54:1 with white */ --thz-link: #c2540b; /* 4.60:1 on white — AA body */ --thz-link-hover: #8a3a00; /* 7.82:1 */ /* ====================================================================== SEMANTIC LAYER — the site's own, deliberately small. Never reference a primitive outside this block. ====================================================================== */ /* surfaces */ --thz-bg-page: var(--thz-paper); --thz-bg-card: var(--thz-white); --thz-bg-ink: var(--thz-accent-700); --thz-bg-brand: var(--thz-brand-700); --thz-bg-brand-light: var(--thz-brand-400); /* ⚠⚠ THE ACTION FILL IS action-700 NOW, NOT action-500 (Glen, 2026-09-18, Q-237/Q-238: "do the same with the buttons so the contrast is fixed"). White on it is 4.60:1, which PASSES AA for normal text - the first time an accent fill on this site has. ⚠️ IT MOVES SIX SURFACES AT ONCE and that is deliberate (Q-238, "every white-on-accent surface"): .thz-btn--primary, .thz-card__head, .thz-step__num, .thz-skip, the open nav toggle and .thz-aibtn--primary. All six carried white at 2.80:1. ✅ THE HEADER BAR FOLLOWED ON THE SAME DAY (Q-239) and now reads action-700 too, via its own --thz-bg-header. *(Superseded text, kept: "THE HEADER BAR IS NOT ONE OF THEM - it reads --thz-bg-header and is still the bright accent-500 … the bar carries no small white text." That last clause was simply WRONG: the nav links are 16px/400.)* *(Superseded: --thz-bg-action was var(--thz-action), hover 600, pressed 700.)* */ --thz-bg-action: var(--thz-action-700); --thz-bg-action-hover: var(--thz-action-800); --thz-bg-action-pressed: var(--thz-action-900); /* ⚠️ THE ACTION BAND HAS ITS OWN TOKEN NOW SO IT STOPS TRACKING THE BUTTON RAMP. It read --thz-bg-action-pressed, which was fine while that meant action-700 - and would have silently dragged three full-page sections (index, features, pricing) down to action-900 the moment the ramp shifted. A section background and a pressed button are different ideas that happened to share a value. */ --thz-bg-band-action: var(--thz-action-700); --thz-bg-action-wash: var(--thz-action-050); --thz-bg-wash: var(--thz-accent-050); --thz-bg-sand: var(--thz-sand); /* type */ --thz-text-body: var(--thz-ink); --thz-text-heading: var(--thz-accent-700); --thz-text-muted: var(--thz-caption); --thz-text-inverse: var(--thz-white); --thz-text-on-ink: var(--thz-paper); --thz-text-on-action: var(--thz-white); /* 4.60:1 on the action-700 fill - AA */ --thz-text-on-brand-light: var(--thz-white); /* the sanctioned 3.32:1 trade */ /* ⚠️ THE BRAND GREY BORROWED AS LETTERING - the product carries the same token for the same reason (CHANGE-036, TMS's "Link copied" channel glyphs). It exists so that a mark meant to read as the brand FILL can be drawn with `color` WITHOUT pointing `color` at a --thz-bg-* token. Same value as --thz-bg-brand, correct tier. 6.59:1 on white. ⚠️ NOT --thz-text-brand: that is accent ink. Brand SURFACE and brand LETTERING are two different families here and the header above says not to tidy them together. */ --thz-text-brand-surface: var(--thz-brand-700); /* ---- third-party channel marks ---------------------------------------- ⚠️ THESE ARE NOT THE PALETTE AND MUST NEVER BE USED AS UI COLOUR. They are other companies' brand colours, carried only so the share-channel marks on /features/ can be drawn in them. They are named tokens rather than hex in site.css purely to honour the "no raw hex in a stylesheet" rule - do not promote them to semantic tokens, do not put a button or a border on one, and do not add a new one without a mark that needs it. ⚠️ SMS HAS NO VENDOR, so it reads the Thoughtz accent instead of borrowing Apple's or Google's green - a second green beside WhatsApp's would have read as a mistake, and imitating a specific messaging app for the generic case would be wrong anyway. A filled icon on the accent is permitted at 18px and up (§3); these are 30px. */ --thz-vendor-facebook: #1877f2; --thz-vendor-whatsapp: #25d366; --thz-vendor-messenger-from: #00b2ff; --thz-vendor-messenger-mid: #a033ff; --thz-vendor-messenger-to: #ff5280; /* ⚠️ ORANGE AS TYPE IS DARKER ON THIS SITE THAN IN THE PRODUCT, AND THE REASON IS THE GROUND, NOT THE BRAND. The product's --thz-action-700 (#c2540b) is documented as "4.60:1 on white — AA body", and that is true: on WHITE. The apps are mostly white. This site is mostly bone (#f5f2ec) and wash (#ede9e1), where the same value measures 4.12 and 3.80 — both failing AA for the eyebrows, nav current-page links, form asterisks and ghost button labels that use it. Measured, not assumed: a contrast sweep over all eight pages flagged every one of them. #a8480a is the MINIMAL darkening that clears 4.5 on all four grounds this site actually uses — white 5.84, bone 5.23, wash 4.82, sand 4.53. ⚠️ It is a website-only value. Do NOT copy it back into the apps' theme.css, and do not "correct" it to action-700 to match them: that reintroduces four AA failures the sweep already found. The BORDER stays action-700 — a border is not type and the definition border is specified as that value. */ --thz-text-action: var(--thz-action-800); /* the same #a8480a, defined once now */ /* ⚠️ THE OTHER DIRECTION, AND IT IS THE PERMITTED ONE. Everything above is about orange as type on a LIGHT ground, which needs darkening to clear AA. On the ink band the problem inverts: darkening would sink it, and the RAW accent measures 6.21:1 on #1a1a1a - the same pair STYLE_GUIDE.md §3 quotes when it says ink on accent-500 would be 6.21. §3 permits accent lettering on ink, bounded: never body copy, never on a light ground. Used by the ink-band eyebrows and the .thz-tag marks. ⚠️ IT EXISTS SO NOTHING POINTS `color` AT --thz-action DIRECTLY. Two eyebrows did, inline, which is a primitive reference in the markup - the one thing the token layer is for. */ --thz-text-action-on-ink: var(--thz-action); --thz-text-on-sand: var(--thz-sand-ink); --thz-text-link: var(--thz-link); --thz-text-link-hover: var(--thz-link-hover); /* header — its own tokens on purpose. Giving the bar its own names means a re-skin is one block here rather than a hunt through site.css — the same reason TMS split --thz-bg-nav-idle out of the brand family instead of letting the sidebar track it. It has already been re-skinned twice from exactly these five lines. ⚠️ THE BAR IS ORANGE (Glen, 2026-09-14): "the nav area should be orange as it is on every page and is our main color." It was bone, then ink, now accent-500. White on it is 2.80:1 — the brand's reaffirmed trade, and Glen made this call having been shown the measurement. ⚠️ WHAT THAT OBLIGES: §3's floor applies to every scrap of text on an accent fill, so the nav links are 16px/600 — NOT the 15px/400 they were on ink. Shrinking or lightening them is the thing that actually makes this unreadable, not the colour. See .thz-nav__list in site.css. */ /* ⚠⚠ THE BAR IS action-700 (Glen, 2026-09-18, Q-239: "do the same with the nav header so the logo and menu items are crisp"). It needed a HIGHER bar than the hero did, and the reason is the menu items rather than the logo: the wordmark is 32px/700, which WCAG counts as large text at 3:1, but the nav links are 16px/400 - normal text, needing 4.5:1. Only action-700 covers both, at 4.60:1. accent-600 would have passed the logo and failed the links, which is the trap in treating "the header" as one thing. *(Superseded: --thz-bg-header was var(--thz-action) at 2.80:1, hover action-600.)* */ --thz-bg-header: var(--thz-action-700); --thz-bg-header-hover: var(--thz-action-800); --thz-text-header: var(--thz-white); /* 4.60:1 on the bar - AA for normal text */ --thz-text-header-active: var(--thz-white); /* ⚠️ action-900, NOT action-700 - the edge has to be darker than the FILL, and the fill is action-700 now. Left as it was, the definition edge would have drawn nothing. */ --thz-border-header: var(--thz-action-900); /* definition edge, darker than the fill */ /* ✅✅ UNUSED SINCE 2026-09-18 (Q-236) - THE HERO GRADIENT IS GONE, replaced by a flat `--thz-action-600` fill because white on the pale top measured 2.35:1 and read as fuzzy. These two are KEPT rather than deleted so restoring the wash is one line, and because the warning below is the reason nobody should reuse --thz-hero-top for anything else. `grep thz-hero-` returns nothing in src/ but this block. the hero banner gradient (Glen, 2026-09-14: "a gradient from light orange (top) to full orange (bottom)"). ⚠️ --thz-hero-top IS A TINT OF THE ACCENT TOWARD WHITE, not a new hue — accent-500 mixed 40% with white. It is a website-only value and it exists ONLY as a gradient start: nothing may sit text on it directly, because white on it is 1.88:1 against accent-500's already-sanctioned 2.80:1. The gradient reaches full accent before the headline starts — see .thz-hero--banner in site.css for where the stops land and why. */ --thz-hero-top: #fcab73; --thz-hero-bottom: var(--thz-action); /* the strip between the bar and the hero — see .thz-strip */ --thz-bg-strip: var(--thz-accent-700); --thz-text-strip: var(--thz-paper); /* edges */ --thz-border-line: #e3ded3; /* ⚠️ THE DEFINITION BORDER IS THE SAME VALUE AS THE FILL NOW, so on .thz-btn--primary it draws nothing. It is kept because it still defines GHOST buttons and chips on light grounds, which is most of its users. The primary button sets its border from the fill instead - see site.css - so a hover does not leave a lighter ring around a darker fill. */ --thz-border-action: var(--thz-action-700); /* the definition border */ --thz-border-sand: var(--thz-sand-edge); /* ---- type scale -------------------------------------------------------- Recorded, not invented: these match what the product actually ships (STYLE_GUIDE.md §4 is a record of the shipped values, closed 2026-09-03). ⚠️ Body stays at weight 300. Inter paints 108% of Rubik 300's ink, which is why the 44 weight-lifts made for Nunito Sans were reverted. */ --thz-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --thz-weight-body: 300; --thz-weight-medium: 400; --thz-weight-strong: 600; --thz-weight-heading: 700; /* ---- spacing ----------------------------------------------------------- */ --thz-gutter: 20px; --thz-measure: 1120px; --thz-radius: 12px; --thz-radius-sm: 8px; --thz-radius-pill: 999px; }