/* ============================================================ * Pit Wall — Design Tokens * * Single source of truth for color, spacing, typography, radius, * shadow, and z-index across every Pit Wall surface (consumer * site, marshalls portal, driver portal, kiosk, outreach pages). * * Authoritative values come from .standards/design-system.json. * Page-level :root blocks may set page-specific overrides but * MUST NOT redefine values that contradict this file. * * New code (primitives, new sections) MUST consume these tokens * via var(--token-name). Raw hex / px values in component code * is rejected per CLAUDE.md "Engineering non-negotiables". * ============================================================ */ :root { /* ---------- Brand color ---------- */ --tz-color-brand-teal: #60becb; /* Primary accent */ --tz-color-brand-peach: #ffac94; /* Secondary accent */ --tz-color-brand-pink: #ea4d9f; /* Tertiary accent / errors */ /* Aliases for the legacy var names already used across pages. Existing code keeps working; new code prefers the --tz- names. */ --teal: var(--tz-color-brand-teal); --peach: var(--tz-color-brand-peach); --pink: var(--tz-color-brand-pink); /* ---------- Neutrals (canonical scale) ---------- */ --tz-color-black: #050508; --tz-color-gray-900: #111118; --tz-color-gray-800: #1a1a24; --tz-color-gray-700: #2a2a38; --tz-color-gray-600: #3a3a4a; --tz-color-gray-500: #6b7280; --tz-color-gray-400: #9ca3af; --tz-color-gray-300: #d1d5db; --tz-color-gray-200: #e5e7eb; --tz-color-gray-100: #f3f4f6; --tz-color-gray-50: #fafafa; --tz-color-white: #f5f5f7; /* ---------- Surface ---------- */ --tz-surface-base: var(--tz-color-black); --tz-surface-default: var(--tz-color-gray-800); --tz-surface-elevated: var(--tz-color-gray-700); --tz-surface-recessed: var(--tz-color-gray-900); --tz-surface-card: var(--tz-color-gray-800); --tz-surface-card-hover: var(--tz-color-gray-700); /* ---------- Text ---------- */ --tz-text-primary: var(--tz-color-white); --tz-text-secondary: var(--tz-color-gray-300); --tz-text-tertiary: var(--tz-color-gray-500); --tz-text-on-brand: var(--tz-color-black); --tz-text-error: var(--tz-color-brand-pink); /* ---------- Border ---------- */ --tz-border-subtle: rgba(255, 255, 255, 0.08); --tz-border-default: var(--tz-color-gray-600); --tz-border-strong: var(--tz-color-gray-500); --tz-border-focus: var(--tz-color-brand-teal); /* ---------- Semantic ---------- */ --tz-color-success: #22c55e; --tz-color-warning: #fbbf24; --tz-color-error: var(--tz-color-brand-pink); --tz-color-info: var(--tz-color-brand-teal); --tz-color-error-light: #f87171; /* lighter red for danger affordances on dark surfaces */ /* Destructive-action RED — distinct from brand-pink (which is the secondary/promotional CTA color). Per CLAUDE.md "red for danger": a delete/ban/destroy button must NOT share the promo pink. Used by .tz-btn--danger. (2026-05-23, John shop-test Item 6.2.) */ --tz-color-danger: #e23b3b; --tz-color-danger-hover: #c42f2f; --tz-color-danger-wash: rgba(226, 59, 59, 0.12); /* ---------- Membership tier colors (admin dashboard only) ---------- Per .standards/design-system.json tierColors. */ --tz-color-tier-standard: var(--tz-color-brand-teal); --tz-color-tier-pro: #d4af37; --tz-color-tier-club: #c77dff; /* ---------- Tints (low-alpha backgrounds for badges/pills) ---------- Defined here once so component code can use var(--tz-tint-*) instead of repeating literal rgba(...) values. The design-token lint allowlists this file; component code that uses these tokens stays clean and the baseline ratchets down as files migrate to them. */ --tz-tint-teal-3: rgba(96, 190, 203, 0.03); --tz-tint-teal-5: rgba(96, 190, 203, 0.05); --tz-tint-teal-6: rgba(96, 190, 203, 0.06); --tz-tint-teal-8: rgba(96, 190, 203, 0.08); --tz-tint-teal-10: rgba(96, 190, 203, 0.10); --tz-tint-teal-15: rgba(96, 190, 203, 0.15); --tz-tint-teal-20: rgba(96, 190, 203, 0.20); --tz-tint-teal-25: rgba(96, 190, 203, 0.25); --tz-tint-teal-30: rgba(96, 190, 203, 0.30); --tz-tint-teal-4: rgba(96, 190, 203, 0.04); --tz-tint-pink-6: rgba(234, 77, 159, 0.06); --tz-tint-pink-15: rgba(234, 77, 159, 0.15); --tz-tint-pink-16: rgba(234, 77, 159, 0.16); --tz-tint-pink-30: rgba(234, 77, 159, 0.30); --tz-tint-peach-6: rgba(255, 172, 148, 0.06); --tz-tint-peach-15: rgba(255, 172, 148, 0.15); --tz-tint-peach-16: rgba(255, 172, 148, 0.16); --tz-tint-success-15: rgba(34, 197, 94, 0.15); --tz-tint-warning-15: rgba(251, 191, 36, 0.15); --tz-tint-surface-2: rgba(255, 255, 255, 0.02); --tz-tint-surface-3: rgba(255, 255, 255, 0.03); --tz-tint-surface-4: rgba(255, 255, 255, 0.04); --tz-tint-surface-5: rgba(255, 255, 255, 0.05); --tz-tint-surface-6: rgba(255, 255, 255, 0.06); --tz-tint-surface-8: rgba(255, 255, 255, 0.08); --tz-tint-surface-10: rgba(255, 255, 255, 0.10); --tz-tint-surface-12: rgba(255, 255, 255, 0.12); --tz-tint-surface-15: rgba(255, 255, 255, 0.15); /* Modal/overlay backgrounds — black at varying opacity. */ --tz-overlay-35: rgba(0, 0, 0, 0.35); --tz-overlay-50: rgba(0, 0, 0, 0.50); --tz-overlay-70: rgba(0, 0, 0, 0.70); /* Status pill tokens. Per .standards/design-system.json badges.statuses and the v2.0 implementation brief §B3 / playbook §B3. Composed from existing tints + brand colors so the status palette inherits any future tint adjustments. */ --tz-status-on-sim-bg: var(--tz-tint-teal-15); --tz-status-on-sim-text: var(--tz-color-brand-teal); --tz-status-checked-in-bg: var(--tz-tint-success-15); --tz-status-checked-in-text: var(--tz-color-success); --tz-status-awaiting-payment-bg: var(--tz-tint-warning-15); --tz-status-awaiting-payment-text: var(--tz-color-warning); --tz-status-completed-bg: var(--tz-tint-surface-6); --tz-status-completed-text: var(--tz-color-gray-400); --tz-status-no-show-bg: var(--tz-tint-peach-15); --tz-status-no-show-text: var(--tz-color-brand-peach); --tz-status-watch-bg: var(--tz-tint-warning-15); --tz-status-watch-text: var(--tz-color-warning); --tz-status-banned-bg: var(--tz-tint-pink-15); --tz-status-banned-text: var(--tz-color-brand-pink); --tz-color-info-blue: #60a5fa; --tz-tint-info-blue-15: rgba(96, 165, 250, 0.15); --tz-status-no-sms-bg: var(--tz-tint-info-blue-15); --tz-status-no-sms-text: var(--tz-color-info-blue); /* ---------- Gradient (brand signature — see design-system.json gradient.rules) ---------- */ --tz-gradient-brand: linear-gradient(90deg, #60becb 5%, #ffac94 50%, #ea4d9f 95%); --gradient: var(--tz-gradient-brand); /* ---------- Spacing scale ---------- */ --tz-space-0: 0; --tz-space-2xs: 2px; --tz-space-xs: 4px; --tz-space-sm: 8px; --tz-space-md: 12px; --tz-space-lg: 16px; --tz-space-xl: 24px; --tz-space-2xl: 32px; --tz-space-3xl: 48px; --tz-space-4xl: 64px; --tz-space-5xl: 96px; /* ---------- Layout widths ---------- */ --tz-max-width-content: 1200px; /* public-site content gutter */ /* ---------- Typography ---------- */ --tz-font-display: 'Rajdhani', sans-serif; --tz-font-body: 'Inter', sans-serif; --tz-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --font-heading: var(--tz-font-display); --font-body: var(--tz-font-body); --tz-font-size-tiny: 0.75rem; --tz-font-size-sm: 0.875rem; --tz-font-size-base: 1rem; --tz-font-size-lg: 1.125rem; --tz-font-size-xl: 1.25rem; --tz-font-size-2xl: 1.5rem; --tz-font-size-3xl: 1.875rem; --tz-font-size-4xl: 2.25rem; --tz-font-size-h3: clamp(1.1rem, 2vw, 1.5rem); --tz-font-size-h2: clamp(1.4rem, 2.5vw, 2rem); --tz-font-size-h1: clamp(1.8rem, 3vw, 2.5rem); --tz-font-size-hero: clamp(2.5rem, 5vw, 4rem); --tz-font-weight-regular: 400; --tz-font-weight-medium: 500; --tz-font-weight-semibold: 600; --tz-font-weight-bold: 700; --tz-line-height-tight: 1.2; --tz-line-height-normal: 1.5; --tz-line-height-relaxed: 1.7; /* ---------- Radius ---------- */ --tz-radius-none: 0; --tz-radius-sm: 4px; --tz-radius-md: 8px; --tz-radius-lg: 12px; --tz-radius-xl: 16px; --tz-radius-full: 9999px; /* ---------- Shadow ---------- */ --tz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --tz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --tz-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); /* ---------- Z-index ---------- */ --tz-z-base: 0; --tz-z-dropdown: 900; --tz-z-sticky: 1000; --tz-z-modal: 2000; --tz-z-toast: 3000; /* ---------- Motion ---------- Authoritative source for animation duration + easing. Per `.standards/design-system.json animations` v2.0. Surfaces apply motion through TZ.motion. (public/js/motion.js); raw transition / animation declarations outside this file, primitives.css, and motion.js are rejected by the no-raw-transition lint. Reduced-motion fallbacks live in motion.js itself. */ --tz-duration-fast: 0.15s; --tz-duration-normal: 0.25s; --tz-duration-slow: 0.36s; --tz-duration-flow: 0.48s; --tz-easing-standard: cubic-bezier(0.2, 0, 0, 1); --tz-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); --tz-easing-decelerate: cubic-bezier(0, 0, 0, 1); --tz-easing-accelerate: cubic-bezier(0.3, 0, 1, 1); /* Motion-distance tokens. Used by motion.js for transform translations. Kept here (not primitives.css) so the values are governed by the same token layer as duration + easing. */ --tz-motion-distance-sm: 8px; --tz-motion-distance-md: 12px; --tz-motion-distance-lg: 24px; /* ---------- Layout ---------- */ --tz-container-max: 1200px; } /* Selection color: solid brand teal on black text. Matches existing pages. */ ::selection { background: var(--tz-color-brand-teal); color: var(--tz-color-black); }