/* ===================================================== CAPSaaS Design Tokens · CSS Custom Properties v1.0 · May 2026 ===================================================== */ :root { /* ----- BRAND COLOURS ----- */ --capsaas-saffron: #DEB71D; --capsaas-forest: #02831E; --capsaas-coral: #F03869; --capsaas-ember: #FC8811; /* ----- NEUTRALS ----- */ --capsaas-ink: #16140E; --capsaas-slate: #4A463C; --capsaas-stone: #8A8579; --capsaas-rule: #E8E4D8; --capsaas-paper: #FBF8EE; --capsaas-snow: #FFFFFF; --capsaas-night: #1C1A12; /* ----- WASH TINTS (10% step) ----- */ --capsaas-saffron-wash: #FAF2D1; --capsaas-forest-wash: #D1ECD7; --capsaas-coral-wash: #FBD7E2; --capsaas-ember-wash: #FEE3C7; /* ----- WASH TEXT (90% step, AA-safe) ----- */ --capsaas-saffron-deep: #6B580C; --capsaas-forest-deep: #01400E; --capsaas-coral-deep: #7E132F; --capsaas-ember-deep: #7E4106; /* ----- SEMANTIC ROLES ----- */ --capsaas-primary: var(--capsaas-ember); --capsaas-primary-hover: #C6660A; --capsaas-success: var(--capsaas-forest); --capsaas-warning: var(--capsaas-saffron); --capsaas-danger: var(--capsaas-coral); --capsaas-info: var(--capsaas-ember); /* ----- SERVICE COLOURS ----- */ --capsaas-service-01: var(--capsaas-ember); /* Schedule Management */ --capsaas-service-02: var(--capsaas-saffron); /* reserved */ --capsaas-service-03: var(--capsaas-forest); /* reserved */ --capsaas-service-04: var(--capsaas-coral); /* reserved */ /* ----- TYPOGRAPHY ----- */ --capsaas-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --capsaas-font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Menlo, monospace; --capsaas-text-xs: 11px; --capsaas-text-sm: 13px; --capsaas-text-base: 14px; --capsaas-text-md: 16px; --capsaas-text-lg: 18px; --capsaas-text-xl: 22px; --capsaas-text-2xl: 28px; --capsaas-text-3xl: 36px; --capsaas-text-4xl: 48px; --capsaas-text-5xl: 64px; --capsaas-text-6xl: 88px; --capsaas-weight-regular: 400; --capsaas-weight-medium: 500; --capsaas-weight-semibold: 600; --capsaas-leading-tight: 1.05; --capsaas-leading-snug: 1.2; --capsaas-leading-base: 1.5; --capsaas-leading-loose: 1.65; --capsaas-tracking-tight: -0.025em; --capsaas-tracking-snug: -0.015em; --capsaas-tracking-base: -0.01em; --capsaas-tracking-normal: 0em; --capsaas-tracking-wide: 0.08em; --capsaas-tracking-wider: 0.12em; --capsaas-tracking-widest: 0.18em; /* ----- SPACING (4px base) ----- */ --capsaas-space-1: 4px; --capsaas-space-2: 8px; --capsaas-space-3: 12px; --capsaas-space-4: 16px; --capsaas-space-5: 20px; --capsaas-space-6: 24px; --capsaas-space-8: 32px; --capsaas-space-10: 40px; --capsaas-space-12: 48px; --capsaas-space-16: 64px; --capsaas-space-20: 80px; /* ----- RADIUS ----- */ --capsaas-radius-sm: 6px; --capsaas-radius-md: 10px; --capsaas-radius-lg: 14px; --capsaas-radius-xl: 18px; --capsaas-radius-2xl: 24px; --capsaas-radius-full: 9999px; /* ----- SHADOWS ----- */ --capsaas-shadow-sm: 0 1px 2px rgba(22, 20, 14, 0.04); --capsaas-shadow-md: 0 4px 12px rgba(22, 20, 14, 0.06); --capsaas-shadow-lg: 0 8px 24px rgba(22, 20, 14, 0.08); --capsaas-shadow-xl: 0 20px 60px rgba(22, 20, 14, 0.12); /* Brand glow (for primary CTAs and ember accents) */ --capsaas-glow-ember: 0 0 0 3px rgba(252, 136, 17, 0.15); /* ----- MOTION ----- */ --capsaas-duration-fast: 150ms; --capsaas-duration-base: 200ms; --capsaas-duration-slow: 300ms; --capsaas-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --capsaas-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* Optional dark-mode overrides — opt in by adding [data-theme="dark"] to */ [data-theme="dark"] { --capsaas-paper: var(--capsaas-night); --capsaas-snow: #2A2722; --capsaas-ink: var(--capsaas-paper); --capsaas-slate: #BFB9A8; --capsaas-stone: #8A8579; --capsaas-rule: #3A372E; }