/*
|--------------------------------------------------------------------------
| VARIABLES — every colour, size and timing the site uses
|--------------------------------------------------------------------------
|
| WHAT THIS FILE IS
|   The design tokens. Nothing else in the CSS hardcodes a colour or a radius;
|   it all points back here. Change a value once and the whole site follows.
|
| LOAD ORDER (set in includes/head.php — do not reorder)
|   variables → base → layout → components → pages → responsive → print
|
| SAFE TO EDIT
|   All of it, carefully. The brand colours come from the Ingolo logo; if you
|   change --blue you are changing the brand.
*/

:root {
    /* ---------------------------------------------------------------
     | Brand palette (from the logo and the existing Ingolo site)
     --------------------------------------------------------------- */
    --ink: #28323C;          /* headlines, dark bands, primary button fill */
    --slate: #4E5F6F;        /* body copy */
    --slate-soft: #7C8B99;   /* muted labels, captions */
    --blue: #1B8FD1;         /* primary accent — the "IT" in the logo */
    --blue-deep: #4A8FCF;    /* secondary blue — logo hex top face */
    --red: #E8311F;          /* sharp accent, used sparingly */
    --canvas: #F5F6F8;       /* page background */
    --surface: #FFFFFF;      /* cards, nav pill */
    --line: #E6E9ED;         /* 1px borders */

    /* Tints derived from the palette. Kept as tokens so a colour change
       does not leave stale rgba() values scattered through the CSS. */
    --blue-tint: rgba(27, 143, 209, 0.10);
    --blue-tint-strong: rgba(27, 143, 209, 0.18);
    --red-tint: rgba(232, 49, 31, 0.10);
    --ink-tint: rgba(40, 50, 60, 0.06);
    --line-invert: rgba(255, 255, 255, 0.16);
    --text-invert: #FFFFFF;
    --text-invert-soft: rgba(255, 255, 255, 0.72);

    /* Status colours for form feedback and notices. */
    --ok: #1E7A4B;
    --ok-tint: rgba(30, 122, 75, 0.10);
    --warn: #A96410;
    --warn-tint: rgba(169, 100, 16, 0.10);

    /* ---------------------------------------------------------------
     | Typography
     --------------------------------------------------------------- */
    --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* A seven-step scale. Nothing outside this list. */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.75rem;
    --fs-xl: 2.5rem;
    --fs-display: clamp(2.25rem, 5.2vw, 4rem);
    --fs-section: clamp(1.75rem, 3.4vw, 2.5rem);

    --lh-tight: 1.05;
    --lh-heading: 1.18;
    --lh-body: 1.65;
    --tracking-display: -0.03em;
    --tracking-eyebrow: 0.08em;

    /* ---------------------------------------------------------------
     | Shape, depth, spacing
     --------------------------------------------------------------- */
    --r-sm: 10px;            /* inputs, chips, icon tiles */
    --r-md: 18px;            /* cards, panels */
    --r-full: 999px;         /* pills */

    --shadow-card: 0 1px 2px rgba(40, 50, 60, 0.04),
                   0 12px 32px -24px rgba(40, 50, 60, 0.25);
    --shadow-float: 0 1px 2px rgba(40, 50, 60, 0.05),
                    0 18px 44px -28px rgba(40, 50, 60, 0.38);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --container: 1200px;
    --container-narrow: 760px;
    --gutter: 1.25rem;                       /* widened at 768px in responsive.css */
    --section-y: clamp(4rem, 8vw, 7rem);
    --section-y-tight: clamp(2.5rem, 5vw, 4rem);

    /* ---------------------------------------------------------------
     | Motion
     --------------------------------------------------------------- */
    --t-fast: 150ms ease;
    --t-med: 240ms ease;
    --reveal-shift: 14px;
    --reveal-step: 60ms;

    /* Stacking order, declared in one place so nothing fights. */
    --z-drawer: 50;             /* mobile menu — sits UNDER the sticky header */
    --z-header: 60;
    --z-menu: 70;
    --z-skip: 100;
}