/* @spine-kit tokens/tokens.css · v1 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. */ } /* 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 */ } /* ════════════════════════════════════════════════════════════════ */