/* ========================================================================== The Wanted Taco - brand tokens Lifted verbatim from the live catering board on 23 August 2026 and checked against it: all 24 tokens matched the shipped template exactly, so nothing here is a reconstruction. One token block, and no raw hex below it. Every color whose legibility depends on its ground carries its ground in its name, because a linter cannot see a background but it can read a token name. ========================================================================== */ :root { /* --- Grounds ---------------------------------------------------------- */ --parchment: #F6EEE0; /* the page */ --parchment-deep: #EFE3CE; /* a band inside the page */ --cream: #FBF6EC; /* column heads, quiet panels */ --white: #FFFFFF; /* cards */ --charcoal: #2E2318; /* the dark ground. 13.3:1 under parchment */ --charcoal-deep: #221A13; /* a well inside the dark ground - the sidebar's active row and its flyouts. masa-on-dark 8.77:1, cream 15.91:1 - both improve on plain charcoal, so nothing already proven there needed rechecking */ /* --- Ink -------------------------------------------------------------- */ /* Proven against every ground it is used on, at 4.5:1 or better. cocoa on parchment 7.73 on cream 8.27 on white 8.91 charcoal on parchment 13.30 cocoa-soft on parchment 3.90 on white 4.49 <- FAILS. Use the ink. */ --cocoa: #5A4632; /* body text */ --cocoa-soft: #8A7358; /* RULES AND ICONS ONLY. Not type */ --cocoa-soft-ink: #7E6950; /* secondary type. parchment 4.53, white 5.22 */ /* --- Brand hues ------------------------------------------------------- */ /* The gold rule, TWT's version of it. --masa is the brand's warm gold and it is unreadable as type on anything light: 1.81:1 on cream, 1.95:1 on white. On charcoal it is 7.84:1 and perfectly legible. --clay behaves the same way, 2.74:1 on white against 5.60:1 on charcoal. So both are fill-and-rule tokens, and the lint fails the build on `color: var(--masa)` or `color: var(--clay)` outside a charcoal ground. The transferable idea is that intent lives in the name. The palette already contained this pattern for one hue and stopped: --terracotta fails as type on white at 4.09:1, and --terracotta-deep passes at 5.91:1. The board uses deep for the badge text and plain for the border, which is correct. This block finishes the job for the rest. */ --terracotta: #C4622D; /* fills, borders, the action stripe */ --terracotta-deep: #A34A1E; /* type. white 5.91, parchment 5.13 */ --clay: #D98A45; /* FILL ONLY */ --masa: #E8B04B; /* FILL ONLY */ --masa-soft: #F2D69A; /* FILL ONLY */ --masa-bg: #FBEFCF; /* a ground, not a mark */ --masa-on-dark: #E8B04B; /* the same gold, legible only on charcoal. 7.84:1 */ --masa-soft-on-dark: #F2D69A; /* --masa-soft's own type twin. 10.85:1 on charcoal, 1.41:1 on white - the ground decides which token */ --masa-border-45: rgba(232, 176, 75, .45); /* --masa at 45%, a border only */ --masa-hover-16: rgba(232, 176, 75, .16); /* --masa at 16%, a hover wash only */ /* --- Rules ------------------------------------------------------------ */ --border: #E0D2B8; --border-strong: #D2BF9E; --hair: rgba(90, 70, 50, .13); /* The ground a modal is read against - the board dimmed, not hidden. The charcoal above at 46%, the same construction as --hair and --masa-border-45: a color with an alpha on it is still a color, and one typed at a call site is one that stops matching the day the dark ground changes. Nothing is ever read ON this, so it carries no contrast claim in its name. */ --charcoal-veil: rgba(46, 35, 24, .46); /* --- The four kinds --------------------------------------------------- */ /* One hue per kind, each with a fill for the stripe and an ink for the word. State is never carried by color alone: the stripe has width as well as hue, and the badge says the word. The predecessor shipped five of these. `trigger` described a stage that existed for a GoHighLevel workflow to hang off, and there is no longer a workflow to hang. It is gone rather than kept "just in case", because carrying two vocabularies is how two parts of one system come to disagree about whether a job is late. --waiting-ink is a correction, not a preference. The live board sets the waiting badge in --watch #9C7418 at 10px uppercase, which is 4.26:1 on white and 3.73:1 on its own tint. Both are below AA for text that size. The ink below holds the same hue and saturation and walks lightness down until every ground it sits on clears 4.5:1. */ --attention: #B3341F; /* alert. white 6.13, own tint 5.13. Passes as-is */ --attention-ink: #B3341F; --attention-tint: #FAE7E0; /* The pressed state of a filled --attention button, the same relationship --terracotta-deep has to --terracotta. Added 28 August 2026 for the refund control, which is the first filled destructive button on this board and so the first thing that needed one. white 7.86. */ --attention-deep: #922A19; --action: #C4622D; /* terracotta */ --action-ink: #A34A1E; /* white 5.91, parchment 5.13 */ --action-tint: #FBF6EC; --waiting: #9C7418; /* watch. FILL ONLY - 3.73:1 on its own tint */ --waiting-ink: #8A6715; /* white 5.21, own tint 4.55, parchment 4.52 */ --waiting-tint: #FBEFCF; --done: #6B7D3A; /* lime */ --done-ink: #5F6F34; /* white 5.51, own tint 4.53, parchment 4.78 */ --done-tint: #E7EBD6; /* --- Corners ---------------------------------------------------------- */ /* The platform ships a `square_corners` lint. It does not survive this fork, and that is the correct outcome rather than a compromise: square corners were REJUV's brand decision wearing a platform lint's clothes. TWT is round, measurably and deliberately - 12px cards, 999px pills, 16px panels on the live board. The lint is replaced rather than deleted. What the platform actually wants is that a radius comes from the system instead of being typed at a call site, so the TWT lint fails the build on any `border-radius` whose value is not one of these three tokens. */ --r-card: 12px; --r-panel: 16px; --r-pill: 999px; /* --- Type ------------------------------------------------------------- */ /* Fraunces for display, Spectral for body, both as the live board runs them. Self-hosted since 23 August 2026. The faces, their licenses and the reasoning are in fonts.css and static/fonts/. Nothing here reaches a third party, so `font-src 'self'` in the CSP needs no exception - which is the point, because the origin that gets added for a font is the one still sitting there when something else wants it. */ --display: 'Fraunces', Georgia, 'Times New Roman', serif; --body: 'Spectral', Georgia, 'Times New Roman', serif; /* For text where the CHARACTERS matter rather than the reading: a plain message body whose line breaks are its paragraphing, an SMS whose length is billable, a webhook address somebody retypes into another system's configuration box. Courier first because that is the face these were written and proofed in. Not self-hosted, unlike the other two. Every platform ships Courier New or Courier, so there is no font file to serve and no request to allow through font-src - and a monospace fallback that is genuinely monospace exists everywhere, which is not true of a display serif. */ --mono: 'Courier New', Courier, ui-monospace, monospace; /* Measured off the live board rather than chosen. */ --t-body: 15px; /* line-height 24px */ --t-card-name: 14px; /* display, 700, -0.01em */ --t-badge: 10px; /* display, 600, uppercase, 0.08em */ --t-button: 10px; /* display, 600, uppercase, 0.16em */ }