/* @spine-kit tokens/tokens.css · v2 Canonical source: spine/kits/tokens/tokens.css Paste-verbatim. Fix the spine, then re-vendor — do not edit this copy in place. */ /* ════════════════════════════════════════════════════════════════ TresPies — tokens kit · two-layer token model ──────────────────────────────────────────────────────────────── This file is two independent token sets, stacked: 1. NIGHT SHIFT (bare names — --bg, --accent, --grad, ...) Context A. The site/product base: near-black canvas, amber accent, the signature amber→pink→purple gradient. This is what a page looks like with zero additional opinion applied. 2. RAINBOW (--tp-* prefixed — --tp-sun, --tp-ocean, --tp-grad-*, ...) Context D. The expressive / brand / cultural layer, sampled from the TresPies medallion logo. Additive, not a replacement — reach for it on celebratory/community surfaces, categorical data-viz, hero art, and (per the 2026-07-22 scope amendment) as the site canvas itself on the two rebuilt outward sites. The two sets share zero variable names — every Rainbow token is --tp-* namespaced — so both :root blocks below coexist in the same page with zero collision and no cascade surprises. See CONTEXTS.md in this kit for which surface gets which context, the scope amendment, and the hard accessibility rules for Rainbow-on-light text. ════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── CONTEXT A · Night Shift base set (bare names) Canonical source: design-systems/TresPies/web-tokens.css Doc: design-systems/TresPies/colors.md · Context A Governs: site chrome, marketing pages, dark UI, product surfaces. Paste-verbatim — do not edit this block. Fix web-tokens.css, then re-vendor. Back-compat aliases are included below so older site CSS keeps resolving without a rename; prefer the canonical names in new work. ────────────────────────────────────────────────────────────── */ :root { /* ── Night Shift · canonical ─────────────────────────────────── */ --bg: #0a0a0f; /* page — near-black */ --bg-alt: #0c0c14; /* alt band */ --surface: #111118; /* card / panel */ --raised: #16161f; /* raised card, hover */ --text: #f0f0f5; /* primary text */ --muted: #9a9aa8; /* secondary text */ --subtle: #6e6e80; /* captions / meta */ --accent: #fbbf24; /* amber — primary accent, CTA, logo */ --live: #34d399; /* positive / active */ --gated: #f59e0b; /* gated / warning */ --info: #60a5fa; /* informational */ --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); /* Signature gradients */ --grad: linear-gradient(135deg, #fbbf24 0%, #ec4899 50%, #8b5cf6 100%); /* amber→pink→purple: eyebrows, section tags, accents */ --grad-soft: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(236,72,153,0.14) 50%, rgba(139,92,246,0.14)); --grad-title: linear-gradient(120deg, #ffffff 0%, #f2f2f7 38%, #cbb6ff 100%); /* white→lavender: hero titles */ --grad-cta: linear-gradient(135deg, #fcd34d 0%, #f472b6 55%, #8b5cf6 100%); /* primary buttons (brighter than --grad) */ --r-card: 16px; --r-chip: 999px; --r-badge: 6px; --wrap: 1120px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Fira Mono", Consolas, monospace; /* ── Back-compat aliases (old blue/gold names → Night Shift) ───── Let existing site CSS keep resolving without a mass rename. Prefer the canonical names above in new work. Custom props resolve lazily, so same-block var() aliasing is safe. */ --bg-deep: #0a0a0f; --bg-card: var(--surface); --bg-card-hover: var(--raised); --bg-surface: rgba(255,255,255,0.03); --border-hover: var(--border-strong); --text-secondary: var(--muted); --text-muted: var(--subtle); --gold: var(--accent); --gold-soft: #f59e0b; --gold-glow: rgba(251,191,36,0.15); --green: var(--live); --green-glow: rgba(52,211,153,0.12); --purple: #8b5cf6; /* software accent → gradient purple */ --purple-glow: rgba(139,92,246,0.14); --rust: #ec4899; /* research accent → gradient pink */ --rust-glow: rgba(236,72,153,0.14); --radius: 16px; --radius-sm: 10px; --max-width: 1120px; } /* ────────────────────────────────────────────────────────────── CONTEXT D · Rainbow expressive layer (--tp-* prefixed) Canonical source: design-systems/TresPies/rainbow-tokens.css Doc: design-systems/TresPies/colors.md · Context D Governs: celebratory / community / cultural / identity-forward surfaces, categorical data-viz, hero art, illustration accents, event & campaign graphics, swag — and, per the 2026-07-22 scope amendment (PIP-114), the site canvas itself on trespiesdesign.com ("Amanecer") and cruzromeromorales.com ("Puertas"). Read CONTEXTS.md for the hard accessibility rules before putting any Rainbow token under body text. Paste-verbatim — do not edit this block. Fix rainbow-tokens.css, then re-vendor. ────────────────────────────────────────────────────────────── */ :root { /* ── SPECTRUM · warm sunrise arc ───────────────────────────────── (sampled element → measured rgb. The token hex is that sample, lightly tidied for harmony; brick & navy ship the exact sample.) */ --tp-cream: #FEDC82; /* mountain snow · sun halo — rgb(254,220,130) */ --tp-peach: #FCB75E; /* dawn dots — rgb(252,183,94) */ --tp-sun: #FBCE0B; /* sun core gold — rgb(253,209,11) */ --tp-amber: #FBA80B; /* amber glow — rgb(253,165,11) */ --tp-orange: #F98A0B; /* sunburst rays — rgb(249,141,4) */ --tp-ember: #E7630B; /* burnt-orange rays — rgb(231,99,11) */ --tp-red: #E73B1F; /* red ray tips — rgb(231,55,33) */ --tp-brick: #A11D13; /* deepest ray shadow — rgb(161,29,19) */ /* ── SPECTRUM · cool land + sky arc ───────────────────────────── */ --tp-lime: #84BB2C; /* chartreuse hills — rgb(130,185,43) */ --tp-emerald: #37BB8F; /* emerald river/valley — rgb(55,187,143) */ --tp-teal: #0B7D91; /* pine teal — rgb(11,121,143) */ --tp-cyan: #0FA6E6; /* bright sky cyan — rgb(11,165,231) */ --tp-ocean: #0E6690; /* deep ocean/azure — rgb(11,99,143) */ /* ── NEUTRAL SPINE · the dark that holds it together ──────────── */ --tp-navy: #0B0B21; /* ring navy — rgb(11,11,33) */ --tp-ink: #0C2222; /* teal-black silhouette— rgb(11,33,33) */ --tp-black: #0A0A0A; /* deepest outline — rgb(11,11,11) */ --tp-paper: #FAF7EF; /* logo field cream (off-white background) */ /* ── SOFT TINTS · badge / chip / highlight backgrounds ──────────── Alpha-based so they sit on any surface, light or dark. Mirrors the Context-B pattern (--green-bg: rgba(...,.1)). */ --tp-sun-soft: rgba(251,206,11,0.15); --tp-orange-soft: rgba(249,138,11,0.15); --tp-ember-soft: rgba(231,99,11,0.15); --tp-red-soft: rgba(231,59,31,0.15); --tp-lime-soft: rgba(132,187,44,0.15); --tp-emerald-soft: rgba(55,187,143,0.15); --tp-teal-soft: rgba(11,125,145,0.15); --tp-cyan-soft: rgba(15,166,230,0.15); --tp-ocean-soft: rgba(14,102,144,0.16); /* ── DEEP SHADES · text-on-light / hover / pressed ─────────────── All 9 verified ≥4.5:1 (WCAG AA normal text) on --tp-paper (#FAF7EF), so each is safe as body text, a link, or a hover/pressed state. */ --tp-sun-deep: #8A6E08; /* 4.55:1 on paper */ --tp-orange-deep: #A85E06; /* 4.60:1 */ --tp-ember-deep: #B44E08; /* 4.86:1 */ --tp-red-deep: #B22318; /* 6.23:1 */ --tp-lime-deep: #567A1B; /* 4.68:1 */ --tp-emerald-deep: #22785E; /* 5.01:1 */ --tp-teal-deep: #08596A; /* 7.41:1 */ --tp-cyan-deep: #0B79A8; /* 4.55:1 */ --tp-ocean-deep: #0A4C6C; /* 8.67:1 */ /* ── SIGNATURE GRADIENTS · rebuilt from the logo's own light ──── */ /* The sun and its rays — warm radial burst. */ --tp-grad-sunburst: radial-gradient(circle at 50% 62%, #FBCE0B 0%, #F98A0B 40%, #E7630B 68%, #E73B1F 100%); /* Full rainbow sweep — warm → cool, the whole medallion in one line. */ --tp-grad-spectrum: linear-gradient(120deg, #FBCE0B 0%, #F98A0B 20%, #E73B1F 36%, #84BB2C 54%, #37BB8F 68%, #0FA6E6 86%, #0E6690 100%); /* Dawn — vertical sunrise wash (headers, hero bands). */ --tp-grad-dawn: linear-gradient(180deg, #FEDC82 0%, #FBCE0B 28%, #F98A0B 66%, #E73B1F 100%); /* Sky — the cyan/teal/ocean zigzags. */ --tp-grad-sky: linear-gradient(135deg, #0FA6E6 0%, #0B7D91 55%, #0E6690 100%); /* Land — the green hills into the water. */ --tp-grad-land: linear-gradient(135deg, #84BB2C 0%, #37BB8F 55%, #0B7D91 100%); /* Soft spectrum wash — low-alpha, for section backgrounds behind text. */ --tp-grad-wash: linear-gradient(120deg, rgba(251,206,11,0.12), rgba(231,59,31,0.10) 38%, rgba(55,187,143,0.10) 68%, rgba(15,166,230,0.12)); /* ── CATEGORICAL DATA-VIZ SCALE · ordered for max distinctness ─── Use in this order for series 1..8 (chart lines, bars, map layers). Chosen so adjacent series stay separable for most color-vision types; pair with shape/label encoding for full accessibility. */ --tp-cat-1: #FBCE0B; /* sun gold */ --tp-cat-2: #0E6690; /* ocean */ --tp-cat-3: #E7630B; /* ember */ --tp-cat-4: #37BB8F; /* emerald */ --tp-cat-5: #E73B1F; /* red */ --tp-cat-6: #0FA6E6; /* cyan */ --tp-cat-7: #84BB2C; /* lime */ --tp-cat-8: #6B4C8A; /* (bridge — violet to close the wheel; NOT in logo, added only for an 8th series) */ /* ── ON-COLOR TEXT · which foreground each anchor needs ────────── Verified AA-normal (≥4.5:1) unless flagged. Pale/warm anchors take ink; dark anchors take paper. Helpers so components don't guess. */ --tp-on-cream: var(--tp-ink); /* 12.44:1 */ --tp-on-peach: var(--tp-ink); /* 9.53:1 */ --tp-on-sun: var(--tp-ink); /* 10.99:1 */ --tp-on-amber: var(--tp-ink); /* 8.45:1 */ --tp-on-orange: var(--tp-ink); /* 6.84:1 */ --tp-on-lime: var(--tp-ink); /* 7.20:1 */ --tp-on-emerald: var(--tp-ink); /* 6.84:1 */ --tp-on-cyan: var(--tp-ink); /* 6.01:1 */ --tp-on-ember: var(--tp-ink); /* 4.88:1 (ink beats paper's 3.17) */ --tp-on-brick: var(--tp-paper); /* 6.85:1 */ --tp-on-teal: var(--tp-paper); /* 4.50:1 */ --tp-on-ocean: var(--tp-paper); /* 5.90:1 */ --tp-on-navy: var(--tp-paper); /* 18.7:1 */ --tp-on-red: var(--tp-ink); /* 3.98:1 — LARGE-TEXT/UI ONLY; brand red can't reach AA-normal in any FG. Use red as a solid bg only for ≥18.66px bold / ≥24px, or use --tp-red-deep for body text. */ } /* ══════════════════════════════════════════════════════════════════ THE THEME LAYER · light + dark ────────────────────────────────────────────────────────────────── Everything above is the canonical palette, copied verbatim. This section is the only place a THEME lives. It is here, in the kit, and never in a stack: a stack may not redefine a canonical token, but the kit IS the design-system consumer and is drift-policed, so a re-binding here is visible to `check-spine-drift.mjs` in all four stacks at once. ── the one rule ──────────────────────────────────────────────── A theme may only re-bind one canonical token to ANOTHER CANONICAL TOKEN. It may never introduce a new colour value. --bg: var(--tp-paper) legitimate --bg: color-mix(in srgb, var(--tp-ink) 7%, var(--tp-paper)) legitimate --bg: #FAF7EF NOT legitimate The third is the same colour as the first and is still forbidden, because it forks the system in a notation the gate cannot follow. Every value below is a var() reference or a color-mix() of them. `transparent` and `currentColor` are CSS-wide keywords, not named colours, and are the one exception (the same exception the stacks' @supports probes already rely on). Gate: check-token-fidelity.mjs, which reads THIS section as well as the plain :root blocks above. ── the cascade, in order ─────────────────────────────────────── 1. dark lives in the plain :root blocks above. It is the default AND the no-preference state. 2. light @media (prefers-color-scheme: light). No script required — the OS preference alone produces a correct page. 3. explicit :root[data-theme="light"] and the :not([data-theme="dark"]) guard on rule 2. Both are (0,2,0) against the media rule's (0,1,0), so a reader's explicit choice wins in BOTH directions regardless of source order. Note what rule 3's dark half is NOT: there is no `:root[data-theme="dark"] { --bg: … }` block, because writing one would mean writing the dark literals a second time, and literals are exactly what the rule above forbids. Forcing dark instead REMOVES the light rules (`:not([data-theme="dark"])`) and falls through to the canonical values, which is the same result with one copy of the numbers instead of two. ── why light is gated on color-mix() ─────────────────────────── --tp-paper (#FAF7EF) is the LIGHTEST value the design system has. A light theme therefore cannot build an elevation ladder out of plain token references — there is nothing above paper to raise a card to, so the ground has to come DOWN, and coming down means mixing. Rather than ship a light theme whose no-color-mix fallback is a flat white page with no surfaces and no borders, the whole light layer sits inside the same @supports probe the stacks use. An engine without color-mix() (pre-2023) gets the dark theme in light mode: not the preference it asked for, but a complete, gated, fully-measured page rather than a broken approximation. ══════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; } @supports (color: color-mix(in srgb, currentColor 50%, transparent)) { /* ── LIGHT · applied by OS preference, unless dark is forced ───── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; /* Surfaces. The ladder runs DOWNWARD from paper: the ground is paper pulled 8% toward ink, and a raised card is paper almost untouched. That sign flip is forced, not stylistic — see the note above. Ground L* 91.17, card L* 96.50: dL* +5.33 in token math, +5.25 measured on rendered pixels, with the card ABOVE the ground, which is the direction "raised" has to mean. The 8% came off the MEASUREMENT rather than the arithmetic — at 7% the rendered step was 4.33, under the 4.5 floor, because the light rig lands on paper differently than the token math predicts. */ --bg: color-mix(in srgb, var(--tp-ink) 8%, var(--tp-paper)); --bg-alt: color-mix(in srgb, var(--tp-ink) 12.5%, var(--tp-paper)); --surface: color-mix(in srgb, var(--tp-ink) 3%, var(--tp-paper)); --raised: color-mix(in srgb, var(--tp-ink) 1%, var(--tp-paper)); /* Text. --tp-ink over --tp-paper is the pairing the 2026-07-22 PIP-114 amendment ratified for a light ground, and it is held here exactly: 15.18:1 on a card, 13.50:1 on the open ground. --muted and --subtle are that same ink walked back toward paper, so the three-step hierarchy keeps one hue. */ --text: var(--tp-ink); --muted: color-mix(in srgb, var(--tp-ink) 80%, var(--tp-paper)); --subtle: color-mix(in srgb, var(--tp-ink) 66%, var(--tp-paper)); /* Accent + status. Every one of these inverts or it disappears: Night Shift amber is 1.56:1 on paper, --live 1.80:1, --gated 2.01:1, --info 2.37:1. The replacements are the design system's own light-ground answer — the `*-deep` family, whose whole documented purpose is AA-safe text on --tp-paper. --live and --gated are pulled a further 30% toward ink so they still clear 4.5:1 on --plane-sunk, the recessed chip they are actually printed on (emerald-deep alone is 3.90 there). */ --accent: var(--tp-red-deep); --live: color-mix(in srgb, var(--tp-emerald-deep) 70%, var(--tp-ink)); --gated: color-mix(in srgb, var(--tp-ember-deep) 70%, var(--tp-ink)); --info: var(--tp-ocean-deep); /* Borders. The dark set is white at 8%/16%; the light set is ink at 14%/26%. Not symmetric on purpose — a dark hairline on paper reads heavier per unit alpha than a light one on near-black, so the alphas are set by measurement (1.32:1 and 1.73:1 against a card) rather than by mirroring. */ --border: color-mix(in srgb, var(--tp-ink) 14%, transparent); --border-strong: color-mix(in srgb, var(--tp-ink) 26%, transparent); /* Back-compat aliases that carry a literal in the canonical set. The alias tokens defined with var() — --bg-card, --gold, --green, --text-secondary, --border-hover … — follow the re-bindings above on their own and are deliberately absent here. */ --bg-deep: var(--tp-paper); --bg-surface: color-mix(in srgb, var(--tp-ink) 3%, transparent); --gold-soft: var(--tp-ember-deep); --gold-glow: color-mix(in srgb, var(--tp-ember) 30%, transparent); --green-glow: color-mix(in srgb, var(--tp-emerald) 26%, transparent); --purple: var(--tp-ocean-deep); --purple-glow: color-mix(in srgb, var(--tp-ocean) 20%, transparent); --rust: var(--tp-red-deep); --rust-glow: color-mix(in srgb, var(--tp-red) 20%, transparent); } } /* ── LIGHT · forced by the reader, whatever the OS says ───────── Same declarations, higher specificity than the media rule and no media condition at all. Duplicated rather than folded into a selector list because a selector list cannot cross an @media boundary; keep the two halves identical. */ :root[data-theme="light"] { color-scheme: light; --bg: color-mix(in srgb, var(--tp-ink) 8%, var(--tp-paper)); --bg-alt: color-mix(in srgb, var(--tp-ink) 12.5%, var(--tp-paper)); --surface: color-mix(in srgb, var(--tp-ink) 3%, var(--tp-paper)); --raised: color-mix(in srgb, var(--tp-ink) 1%, var(--tp-paper)); --text: var(--tp-ink); --muted: color-mix(in srgb, var(--tp-ink) 80%, var(--tp-paper)); --subtle: color-mix(in srgb, var(--tp-ink) 66%, var(--tp-paper)); --accent: var(--tp-red-deep); --live: color-mix(in srgb, var(--tp-emerald-deep) 70%, var(--tp-ink)); --gated: color-mix(in srgb, var(--tp-ember-deep) 70%, var(--tp-ink)); --info: var(--tp-ocean-deep); --border: color-mix(in srgb, var(--tp-ink) 14%, transparent); --border-strong: color-mix(in srgb, var(--tp-ink) 26%, transparent); --bg-deep: var(--tp-paper); --bg-surface: color-mix(in srgb, var(--tp-ink) 3%, transparent); --gold-soft: var(--tp-ember-deep); --gold-glow: color-mix(in srgb, var(--tp-ember) 30%, transparent); --green-glow: color-mix(in srgb, var(--tp-emerald) 26%, transparent); --purple: var(--tp-ocean-deep); --purple-glow: color-mix(in srgb, var(--tp-ocean) 20%, transparent); --rust: var(--tp-red-deep); --rust-glow: color-mix(in srgb, var(--tp-red) 20%, transparent); } } /* stack-local layout variables */ /* ════════════════════════════════════════════════════════════════ STACK-LOCAL LAYOUT VARIABLES ──────────────────────────────────────────────────────────────── Everything above this line is canonical and copied verbatim. This section is the ONLY place a stack may add its own variables — and layout/rhythm is the ONLY kind of variable that belongs here. A stack must never redefine a --tp-* token or a Night Shift value from the two blocks above (gate: check-token-fidelity.mjs fails the build if it finds one). Add to this block; don't touch the rest of the file. The three below are examples, not requirements — replace or extend them for what the stack actually needs. */ :root { --wrap-narrow: 880px; /* narrower alternative to --wrap (1120px) — prose columns, article body */ --section-rhythm: 96px; /* vertical spacing between major page sections */ --header-height: 72px; /* fixed/sticky header height — for scroll-offset math */ } /* ════════════════════════════════════════════════════════════════ */