/* ==========================================================================
   Design Tokens — Tufford Group
   Extracted from Figma: Homepage Blocks (desktop 1440 + mobile 390)
   ========================================================================== */

:root {

    /* ══════════════════════════════════════════════════════════════════════
       COLORS
       ══════════════════════════════════════════════════════════════════════ */

    /* ── Brand Oranges ── */
    --color-primary-orange: #FFAA2F;
    --color-orange-dark: #E56012;
    --color-orange-light: #FFD495;

    /* ── Greys ── */
    --color-grey-ultra-dark: #191919;
    --color-grey-dark: #242424;
    --color-grey-mid: #58585A;
    --color-grey-light: #E5E5E5;
    --color-warm-grey: #DBD5CD;

    /* ── Neutrals ── */
    --color-off-white: #F7F7F7;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* ── Overlays ── */
    --overlay-dark-10: rgba(0, 0, 0, 0.1);          /* image card scrim */
    --overlay-orange-20: rgba(255, 170, 47, 0.2);    /* radial glow on grid panel */

    /* ══════════════════════════════════════════════════════════════════════
       GRADIENTS
       ══════════════════════════════════════════════════════════════════════ */

    --gradient-orange-mid: linear-gradient(250deg, #FFCD6B 1%, #FFAA2F 44%, #FF650E 82%);
    --gradient-orange-light: linear-gradient(250deg, #FFFFFF 1%, #FFCD6B 44%, #FF630C 82%);
    --gradient-grey: linear-gradient(to bottom, #EEEBEA, #F6F6F6);
    --gradient-radial-light-base: #F5F0E9;

    /* ══════════════════════════════════════════════════════════════════════
       TYPOGRAPHY — Font Families
       ══════════════════════════════════════════════════════════════════════ */

    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Poppins', -apple-system, sans-serif;

    /* ══════════════════════════════════════════════════════════════════════
       TYPOGRAPHY — Font Weights
       ══════════════════════════════════════════════════════════════════════ */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* ══════════════════════════════════════════════════════════════════════
       TYPOGRAPHY — Heading Scales (Desktop)
       H1–H3: Playfair Display | H4–H6: Poppins
       ══════════════════════════════════════════════════════════════════════ */

    --h1-size: 68px;
    --h1-line-height: 1.25;
    --h1-weight: var(--weight-medium);

    --h2-size: 48px;
    --h2-line-height: 1.25;
    --h2-weight: var(--weight-medium);

    --h3-size: 32px;
    --h3-line-height: 1.25;
    --h3-weight: var(--weight-regular);

    --h4-size: 32px;
    --h4-line-height: 1.4;
    --h4-weight: var(--weight-regular);

    --h5-size: 28px;
    --h5-line-height: 1.4;
    --h5-weight: var(--weight-medium);

    --h6-size: 21px;
    --h6-line-height: 1.4;
    --h6-weight: var(--weight-medium);

    /* ══════════════════════════════════════════════════════════════════════
       TYPOGRAPHY — Body Scales
       ══════════════════════════════════════════════════════════════════════ */

    --body-large-size: 18px;
    --body-large-line-height: 1.4;

    --body-mid-size: 16px;
    --body-mid-line-height: 1.25;

    --body-small-size: 14px;
    --body-small-line-height: 1.4;

    /* ══════════════════════════════════════════════════════════════════════
       TYPOGRAPHY — Link Scales
       ══════════════════════════════════════════════════════════════════════ */

    --link-large-size: 21px;
    --link-large-line-height: 1;

    --link-small-size: 15px;
    --link-small-line-height: 1;

    /* ══════════════════════════════════════════════════════════════════════
       GRID
       Desktop: 1440px frame, 12 columns, 24px gutter, 80px margins
       ══════════════════════════════════════════════════════════════════════ */

    --grid-columns: 12;
    --grid-gutter: 24px;
    --grid-margin: 80px;
    --grid-max-width: 1440px;

    /* ══════════════════════════════════════════════════════════════════════
       SPACING
       ══════════════════════════════════════════════════════════════════════ */

    --section-padding-y: 120px;                /* internal section padding */
    --space-xxl: 64px;                         /* heading-to-content gap (grid panel desktop) */
    --space-xl: 48px;
    --space-lg: 32px;                          /* hero CTA gap, mobile heading-to-content */
    --space-md: 24px;                          /* card gap, nav item gap, card inner padding */
    --space-sm: 16px;                          /* mobile icon-to-heading gap */
    --space-xs: 8px;

    /* ══════════════════════════════════════════════════════════════════════
       BORDER RADIUS
       ══════════════════════════════════════════════════════════════════════ */

    --radius-pill: 44px;                       /* buttons, menu chip */
    --radius-card: 20px;                       /* content & image cards */

    /* ══════════════════════════════════════════════════════════════════════
       BUTTONS
       Two primary variants extracted from hero CTA + nav/menu buttons.
       ══════════════════════════════════════════════════════════════════════ */

    /* Button — Primary (hero CTA: "I'm interested" / "Get started now") */
    --btn-primary-height: 57px;
    --btn-primary-bg: var(--color-off-white);
    --btn-primary-color: var(--color-grey-dark);
    --btn-primary-font-size: var(--link-large-size);      /* 21px */
    --btn-primary-font-weight: var(--weight-medium);
    --btn-primary-radius: var(--radius-pill);
    --btn-primary-icon-size: 51px;

    /* Button — Secondary (nav CTA: "Speak to the team") */
    --btn-secondary-height: 38px;
    --btn-secondary-bg: var(--color-primary-orange);
    --btn-secondary-color: var(--color-white);
    --btn-secondary-font-size: var(--link-small-size);    /* 15px */
    --btn-secondary-font-weight: var(--weight-medium);
    --btn-secondary-radius: var(--radius-pill);
    --btn-secondary-icon-size: 34px;

    /* Button — Menu chip (header: "Menu") */
    --btn-menu-height: 38px;
    --btn-menu-bg: var(--color-off-white);
    --btn-menu-color: var(--color-grey-dark);
    --btn-menu-font-size: var(--link-small-size);         /* 15px */
    --btn-menu-font-weight: var(--weight-medium);
    --btn-menu-radius: var(--radius-pill);
    --btn-menu-icon-size: 34px;

    /* ══════════════════════════════════════════════════════════════════════
       CARDS (grid panel)
       ══════════════════════════════════════════════════════════════════════ */

    --card-padding: 24px;
    --card-radius: var(--radius-card);
    --card-height-desktop: 420px;
    --card-height-mobile: 320px;
    --card-title-size: var(--h6-size);         /* 21px Poppins Medium */
    --card-body-size-desktop: var(--body-large-size);  /* 18px */
    --card-body-size-mobile: var(--body-mid-size);     /* 16px */

    /* ══════════════════════════════════════════════════════════════════════
       HEADER / NAV
       ══════════════════════════════════════════════════════════════════════ */

    --header-height-desktop: 90px;
    --header-height-mobile: 65px;
    --nav-link-size: var(--h3-size);           /* 32px Playfair Display Regular */
    --nav-link-weight: var(--weight-regular);
    --nav-divider-color: var(--color-grey-light);

    /* ══════════════════════════════════════════════════════════════════════
       Z-INDEX
       ══════════════════════════════════════════════════════════════════════ */

    --z-header: 100;
    --z-nav-overlay: 200;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (≤ 767px)
   Mobile grid: 390px frame, 4 columns, 16px gutter, 16px margins
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    :root {
        /* Grid */
        --grid-columns: 4;
        --grid-gutter: 16px;
        --grid-margin: 16px;

        /* Spacing */
        --section-padding-y: 84px;
        --space-xxl: 32px;

        /* Heading scale — Mobile */
        --h1-size: 44px;
        --h2-size: 36px;
    }
}