/* ================================================================
   tokens.css - Shared design tokens for brochure sites
   Brand-specific overrides via each site's brand.css
   ================================================================ */

:root {
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;

    /* Spacing (8px scale) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;
    --space-12: 96px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition: 0.3s ease;
    --transition-fast: 0.15s ease;

    /* Brand colors (defaults — overridden per-site via brand.css) */
    --brand-primary: #2670B1;
    --brand-dark: #1a4a7a;
    --brand-light: #e8f0fa;
    --brand-accent: #107931;
    --brand-accent-light: #e8f5ec;

    /* Text */
    --text-heading: #1a1a2e;
    --text-body: #4a4a5a;
    --text-muted: #8a8a9a;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: rgba(255, 255, 255, 0.7);

    /* Backgrounds */
    --bg-page: #ffffff;
    --bg-section: #f8f9fa;
    --bg-dark: #0e1e49;

    /* Footer */
    --footer-bg: #0e1e49;
    --footer-text: rgba(255, 255, 255, 0.7);

    /* Timeline — fixed colors, never swapped by brand */
    --timeline-banking: #2670B1;
    --timeline-banking-light: #e8f0fa;
    --timeline-tech: #107931;
    --timeline-tech-light: #e8f5ec;

    /* Container */
    --container-max: 1140px;
    --container-padding: 24px;
}