/**
 * EZ Integral Design System
 * =========================
 * TRANSFERABLE CORE — framework/platform independent.
 *
 * This file is the canonical home for EZ visual-system primitives that may
 * later be reused by another frontend (app, React, Wix, etc.). WordPress-
 * specific selectors MUST NOT be added here.
 *
 * Foundation phase: tokens only. Nothing in the current WordPress UI consumes
 * these tokens yet, so loading this file must not change existing pixels.
 */

:root {
    /* ---------------------------------------------------------
     * Geometry: wide screens add breathing room, not giant UI.
     * --------------------------------------------------------- */
    --ezsc-ds-app-max: 90rem;          /* 1440px at the browser default 16px */
    --ezsc-ds-content-max: 75rem;      /* 1200px */
    --ezsc-ds-reading-max: 46rem;      /* comfortable long-form line length */
    --ezsc-ds-sidebar: 18rem;          /* 288px */
    --ezsc-ds-card-min: 17.5rem;       /* 280px intrinsic card floor */

    /* Fluid page edge space. Kept bounded for phones and very wide screens. */
    --ezsc-ds-page-gutter: clamp(1rem, 0.55rem + 2vw, 2.5rem);

    /* ---------------------------------------------------------
     * Spacing scale — stable rhythm shared by every EZ frontend.
     * --------------------------------------------------------- */
    --ezsc-ds-space-1: 0.25rem;        /* 4px */
    --ezsc-ds-space-2: 0.5rem;         /* 8px */
    --ezsc-ds-space-3: 0.75rem;        /* 12px */
    --ezsc-ds-space-4: 1rem;           /* 16px */
    --ezsc-ds-space-5: 1.5rem;         /* 24px */
    --ezsc-ds-space-6: 2rem;           /* 32px */
    --ezsc-ds-space-7: 3rem;           /* 48px */
    --ezsc-ds-space-8: 4rem;           /* 64px */

    /* ---------------------------------------------------------
     * Typography.
     * Body/work UI stays stable; display text may scale fluidly later.
     * --------------------------------------------------------- */
    --ezsc-ds-font-body: 1rem;         /* 16px */
    --ezsc-ds-font-ui: 0.9375rem;      /* 15px */
    --ezsc-ds-font-meta: 0.875rem;     /* 14px */
    --ezsc-ds-line-body: 1.55;
    --ezsc-ds-line-ui: 1.35;

    --ezsc-ds-font-h3-min: 1.125rem;   /* 18px */
    --ezsc-ds-font-h3-max: 1.375rem;   /* 22px */
    --ezsc-ds-font-h2-min: 1.375rem;   /* 22px */
    --ezsc-ds-font-h2-max: 1.75rem;    /* 28px */
    --ezsc-ds-font-h1-min: 1.75rem;    /* 28px */
    --ezsc-ds-font-h1-max: 2.375rem;   /* 38px */
    --ezsc-ds-font-hero-min: 2rem;     /* 32px */
    --ezsc-ds-font-hero-max: 3rem;     /* 48px */

    /* Component-relative fluid formulas. Activate only inside a size container. */
    --ezsc-ds-font-h3-fluid: clamp(var(--ezsc-ds-font-h3-min), 1.02rem + 0.4cqi, var(--ezsc-ds-font-h3-max));
    --ezsc-ds-font-h2-fluid: clamp(var(--ezsc-ds-font-h2-min), 1.15rem + 0.8cqi, var(--ezsc-ds-font-h2-max));
    --ezsc-ds-font-h1-fluid: clamp(var(--ezsc-ds-font-h1-min), 1.35rem + 1.4cqi, var(--ezsc-ds-font-h1-max));

    /* ---------------------------------------------------------
     * Interaction/accessibility geometry.
     * --------------------------------------------------------- */
    --ezsc-ds-control-min-height: 2.75rem; /* 44px touch-friendly target */
    --ezsc-ds-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28);

    /* ---------------------------------------------------------
     * Radius primitives. Brand/runtime choices may map onto these later.
     * --------------------------------------------------------- */
    --ezsc-ds-radius-sm: 0.5rem;
    --ezsc-ds-radius-md: 0.875rem;
    --ezsc-ds-radius-lg: 1.25rem;
    --ezsc-ds-radius-xl: 1.75rem;
    --ezsc-ds-radius-pill: 999px;
}

/* ---------------------------------------------------------
 * Responsive geometry primitives — portable EZ rules.
 * These are intentionally selector-free so another frontend can reuse them.
 * --------------------------------------------------------- */
:root {
    --ezsc-ds-layout-gap: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem);
    --ezsc-ds-section-gap: clamp(1rem, 0.82rem + 0.75vw, 1.5rem);
    --ezsc-ds-hero-title-fluid: clamp(1.5rem, 1.15rem + 1.8cqi, var(--ezsc-ds-font-h1-max));
    --ezsc-ds-hero-copy-fluid: clamp(0.9375rem, 0.88rem + 0.35cqi, 1.0625rem);
}