/* TRAZAEU brand tokens * Reference these via CSS custom properties or import into Tailwind/Stylex config. * Source of truth — do not redefine elsewhere. */ :root { /* Surfaces */ --tz-bone: #F4F1EA; /* primary background, off-white warm */ --tz-bone-2: #ECE7DC; /* secondary surface, slight contrast */ /* Ink */ --tz-ink: #0A0A0A; /* primary foreground, near-black */ --tz-ink-2: #1A1A1A; /* secondary text */ --tz-muted: #6B6B66; /* tertiary text, captions, metadata */ --tz-rule: rgba(10, 10, 10, 0.14); /* hairlines */ /* Accent — ONE accent only. Reserved for CTAs, alerts, the red barcode bar */ --tz-red: #D9261C; /* Type */ --tz-font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; --tz-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Spacing scale */ --tz-gap-xs: 6px; --tz-gap-sm: 12px; --tz-gap-md: 24px; --tz-gap-lg: 48px; --tz-gap-xl: 96px; } /* Dark surface inversion. Apply to or a section. */ [data-theme="dark"] { --tz-bone: #0A0A0A; --tz-bone-2: #1A1A1A; --tz-ink: #F4F1EA; --tz-ink-2: #ECE7DC; --tz-muted: rgba(244, 241, 234, 0.55); --tz-rule: rgba(244, 241, 234, 0.18); /* red stays the same */ }