/* ============================================================
   Zagali — Design Tokens (v7: corporate, white + blue)
   Reference: analog.com — clean, image-led, flat, professional.
   ============================================================ */
:root {
    /* ---- Brand colour: single flat green (#198754) ---- */
    --blue: #198754;
    --blue-700: #198754;
    --blue-600: #198754;
    --red: #d62828;             /* single sharp accent, used sparingly */

    /* ---- Surfaces (white corporate) ---- */
    --bg: #ffffff;
    --surface: #f4f6f8;         /* light gray alternate section */
    --surface-2: #eaeef2;
    --line: #dde3e9;            /* thin hairline */
    --line-strong: #c6cfd8;

    /* ---- Text ---- */
    --ink: #10222e;             /* headings, near-black-blue */
    --ink-soft: #2c3b46;        /* body */
    --muted: #566571;           /* secondary */
    --muted-2: #78848e;

    --on-dark: #ffffff;
    --on-dark-soft: #ffffff;
    --on-dark-muted: #eaf6f0;

    /* ---- Semantic ---- */
    --primary: var(--blue);
    --accent: var(--red);
    --focus: #198754;

    /* ---- Typography — neutral corporate ---- */
    --font-sans: 'Cairo', cursive;
    --font-ar: 'Cairo', cursive;

    --fs-hero: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
    --fs-h2: clamp(1.7rem, 1.15rem + 2.2vw, 2.5rem);
    --fs-h3: clamp(1.15rem, 1rem + 0.7vw, 1.35rem);
    --fs-lead: clamp(1.05rem, 0.98rem + 0.45vw, 1.22rem);

    /* ---- Radius — flat / squared (no "AI" rounding) ---- */
    --r-xs: 0;
    --r-sm: 2px;
    --r-md: 3px;
    --r-lg: 4px;
    --r-pill: 3px;

    /* ---- Shadows — subtle, corporate ---- */
    --shadow-xs: 0 1px 2px rgba(16, 34, 46, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 34, 46, 0.08);
    --shadow-md: 0 6px 18px -8px rgba(16, 34, 46, 0.18);

    /* ---- Layout — full width, small margins ---- */
    --container: 1680px;
    --container-wide: 1680px;
    --gutter: clamp(1rem, 0.4rem + 1.4vw, 2rem);
    --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

    /* ---- Z-index ---- */
    --z-header: 100;
}