/* ═══════════════════════════════════════════════════
   Traffic Builders — Design Tokens
   All brand colors, spacing, typography centralized here.
   Override via BonusBuilder plugin or child theme.
   ═══════════════════════════════════════════════════ */

:root {
    /* ─── Brand Palette ─── */
    --tb-bg: #FAFAFB;
    --tb-bg-alt: #F5F5F7;
    --tb-surface: #FFFFFF;
    --tb-border: #E8E9ED;
    --tb-border-subtle: #F0F1F4;

    --tb-text: #0A0E1A;
    --tb-text-muted: #515361;
    --tb-text-dim: #8B8D99;

    --tb-primary: #3B82F6;
    --tb-primary-hover: #2563EB;
    --tb-primary-soft: #DBEAFE;

    --tb-accent: #6366F1;
    --tb-accent-hover: #4F46E5;
    --tb-accent-soft: #E0E7FF;

    --tb-purple: #A855F7;
    --tb-purple-soft: #F3E8FF;

    --tb-green: #10B981;
    --tb-green-soft: #D1FAE5;

    --tb-amber: #F59E0B;
    --tb-amber-soft: #FEF3C7;

    --tb-red: #EF4444;
    --tb-red-soft: #FEE2E2;

    /* ─── Dark surfaces (hero, CTA band) ─── */
    --tb-dark: #0B0E14;
    --tb-dark-surface: #151A24;
    --tb-dark-border: #1E2533;
    --tb-dark-text: #E8ECF2;
    --tb-dark-text-muted: #7B8498;

    /* ─── Typography ─── */
    --tb-font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
    --tb-font-mono: 'JetBrains Mono', monospace;

    --tb-text-xs: 0.75rem;
    --tb-text-sm: 0.875rem;
    --tb-text-base: 1rem;
    --tb-text-lg: 1.125rem;
    --tb-text-xl: 1.25rem;
    --tb-text-2xl: 1.5rem;
    --tb-text-3xl: 1.875rem;
    --tb-text-4xl: 2.25rem;
    --tb-text-5xl: 3rem;
    --tb-text-6xl: 3.75rem;
    --tb-text-7xl: 4.5rem;

    --tb-leading-tight: 1.1;
    --tb-leading-snug: 1.3;
    --tb-leading-normal: 1.5;
    --tb-leading-relaxed: 1.7;

    /* ─── Spacing ─── */
    --tb-s-1: 0.25rem;
    --tb-s-2: 0.5rem;
    --tb-s-3: 0.75rem;
    --tb-s-4: 1rem;
    --tb-s-5: 1.25rem;
    --tb-s-6: 1.5rem;
    --tb-s-8: 2rem;
    --tb-s-10: 2.5rem;
    --tb-s-12: 3rem;
    --tb-s-16: 4rem;
    --tb-s-20: 5rem;
    --tb-s-24: 6rem;
    --tb-s-32: 8rem;

    /* ─── Radius ─── */
    --tb-r-sm: 4px;
    --tb-r: 8px;
    --tb-r-md: 12px;
    --tb-r-lg: 16px;
    --tb-r-xl: 24px;
    --tb-r-full: 9999px;

    /* ─── Shadows ─── */
    --tb-shadow-sm: 0 1px 2px rgba(10, 14, 26, 0.04);
    --tb-shadow: 0 2px 6px rgba(10, 14, 26, 0.05), 0 1px 3px rgba(10, 14, 26, 0.04);
    --tb-shadow-md: 0 4px 12px rgba(10, 14, 26, 0.06), 0 2px 6px rgba(10, 14, 26, 0.04);
    --tb-shadow-lg: 0 12px 32px rgba(10, 14, 26, 0.08), 0 4px 12px rgba(10, 14, 26, 0.05);
    --tb-shadow-xl: 0 24px 48px rgba(10, 14, 26, 0.12), 0 8px 24px rgba(10, 14, 26, 0.08);

    /* ─── Container widths ─── */
    --tb-container: 1200px;
    --tb-container-wide: 1400px;
    --tb-container-narrow: 880px;

    /* ─── Transitions ─── */
    --tb-t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --tb-t: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --tb-t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}