/* websites/shared/css/variables.css
 * ============================================================================
 * DESIGN TOKENS - Shared across all BeWell IT websites
 *
 * Override --brand-* variables in per-site theme files to customise.
 * ============================================================================ */

:root {
    /* --- Brand palette (override per-site) --- */
    --brand-primary: #3b6b8a;
    --brand-primary-light: #5a8fad;
    --brand-primary-subtle: #eef4f8;
    --brand-primary-hover: #2e5570;
    --brand-accent: #c4956a;
    --brand-accent-light: #f5ece4;

    /* --- Product brand colours (consistent across all sites) --- */
    --product-brian-primary: #5a8ab5;
    --product-brian-bg: #f0f5fa;
    --product-esrt-primary: #5a9a6b;
    --product-esrt-bg: #f0f7f2;
    --product-catalyst-primary: #7a7f8a;
    --product-catalyst-bg: #f4f5f7;

    /* --- Semantic surface colours --- */
    --color-surface: #ffffff;
    --color-surface-secondary: #fafbfc;
    --color-surface-elevated: #ffffff;
    --color-on-surface: #1a2332;
    --color-on-surface-secondary: #525d6e;
    --color-on-surface-tertiary: #8a92a0;
    --color-border: #e4e7ec;
    --color-border-subtle: #f0f1f4;
    --color-focus-ring: rgba(59, 107, 138, 0.35);

    /* --- Typography --- */
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.75rem;

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.65;

    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;

    /* --- Spacing scale --- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* --- Radii --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.04);
    --shadow-md: 0 2px 8px rgba(26, 35, 50, 0.06), 0 1px 2px rgba(26, 35, 50, 0.04);
    --shadow-lg: 0 8px 24px rgba(26, 35, 50, 0.08), 0 2px 6px rgba(26, 35, 50, 0.04);
    --shadow-card-hover: 0 12px 32px rgba(26, 35, 50, 0.10), 0 4px 8px rgba(26, 35, 50, 0.04);

    /* --- Transitions --- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* --- Layout --- */
    --container-max: 1120px;
    --container-narrow: 720px;
}

/* --- Responsive overrides --- */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
        --text-3xl: 1.75rem;
        --text-2xl: 1.5rem;
        --space-5xl: 5rem;
        --space-4xl: 3.5rem;
    }
}