/**
 * TIA design tokens
 * Consolidated spacing, type, color, and radius scales.
 * Component CSS should reference these variables — avoid new hardcoded values.
 */

:root {
    /* —— Brand color —— */
    --red: #e21e26;
    --red-hover: #c41820;
    --black: #212021;
    --muted: #4b4b4b;
    --gray: #8d8d8d;
    --border: #e4e4e4;
    --border-warm: #e5e1d8;
    --canvas: #f3f1ea;
    --paper: #ffffff;
    --green: #1b623a;
    --green-deep: #0f3a22;
    --orange: #f15822;
    --yellow: #ffd168;
    --sage: #c2d0a8;

    /* —— Typography families —— */
    --font-display: "Bebas Neue", Impact, sans-serif;
    --font-body: "Montserrat", system-ui, sans-serif;

    /* —— Font sizes —— */
    --text-eyebrow: 11px;
    --text-caption: 13px;
    --text-body-sm: 14px;
    --text-body: 15px;
    --text-body-lg: 16px;
    --text-ui: 15px;
    --text-title-sm: clamp(1.6rem, 2.4vw, 2.1rem);
    --text-title: clamp(2.6rem, 4.5vw, 3.6rem);
    --text-display: clamp(3.2rem, 6vw, 5rem);
    --text-hero: clamp(3.6rem, 7vw, 5.65rem);

    /* —— Line heights —— */
    --lh-display: 0.9;
    --lh-title: 0.92;
    --lh-title-sm: 0.95;
    --lh-body: 1.5;
    --lh-body-loose: 1.55;
    --lh-ui: 1.35;
    --lh-tight: 1;

    /* —— Spacing (4px base) —— */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 88px;

    /* —— Radius —— */
    --radius-sm: 8px;
    --radius: 10px;
    --radius-md: 16px;
    --radius-card: 22px;

    /* —— Layout —— */
    --container: 1180px;
    --header-h: 92px;

    /* —— Effects (optional semantic shades) —— */
    --shade-soft: rgba(0, 0, 0, 0.08);
    --shade-mid: rgba(0, 0, 0, 0.18);
    --shade-strong: rgba(0, 0, 0, 0.35);
    --overlay-hero: rgba(18, 16, 16, 0.42);
}