/* ============================================================
   ACTIV8 — Design Tokens
   All custom properties used across the theme and widgets.
   ============================================================ */

:root {

    /* ── Brand colours ───────────────────────────────────────── */
    --color-primary: #F97316; /* orange */
    --color-black: #111111;
    --color-white: #ffffff;
    --color-grey-light: #EEF2F7;
    --color-grey: #999999;
    --color-grey-dark: #555555;
    --color-secondary: #54595f;

    /* ── Semantic aliases ────────────────────────────────────── */
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-white);
    --link-color: var(--color-primary);
    --border-color: var(--color-grey-light);

    /* ── Layout ──────────────────────────────────────────────── */
    --container-max: 1600px;
    --container-pad-x: 80px; /* desktop side gutters */
    --container-pad-x-sm: 24px; /* mobile side gutters  */

    /* ── Border radius ───────────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-pill: 50px;

    /* ── Spacing scale ───────────────────────────────────────── */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-xxl: 96px;

    /* ── Typography ──────────────────────────────────────────── */
    --font-body: 'acumin-pro', sans-serif; /* Typekit kit pmg8lus — update family name if different */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-md: 18px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 48px;
    --text-4xl: 64px;
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-loose: 1.7;

    /* ── Transitions ─────────────────────────────────────────── */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --transition: 0.2s ease;
    --transition-md: 0.35s var(--ease);
}


/* ── Theme variants ──────────────────────────────────────────
   Override --color-primary (and derived tokens) per section theme.
   Applied via body class: theme-residential | theme-commercial |
   theme-one_stop_shop | theme-default.
   Actual colours to confirm from full design — placeholders below.
   ─────────────────────────────────────────────────────────── */

.theme-residential {
    --color-primary: #F97316;
}

.theme-commercial {
    --color-primary: #F97316; /* TODO: confirm from design */
}

.theme-one_stop_shop {
    --color-primary: #F97316; /* TODO: confirm from design */
}

.theme-default {
    --color-primary: #F97316;
}