/* ==========================================================================
   WizeTek design tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, spacing, radii and motion.
   Components consume these variables and never hard-code a brand value, so
   retuning the brand is an edit here rather than a search across templates.
   ========================================================================== */

:root {
    /* --- Brand ---------------------------------------------------------- */
    /* The four values in the WizeTek brand palette, plus a deeper floor used
       for gradients so a dark band has somewhere to fall away to. */
    --wz-navy-900: #04101f;
    --wz-navy: #071a32;
    --wz-navy-700: #0b2444;
    --wz-blue: #1657c7;
    --wz-azure: #2e7bf6;
    --wz-sky: #5ab6ff;

    /* --- Neutrals ------------------------------------------------------- */
    /* Biased toward the brand blue rather than pure grey: a neutral that
       shares the accent's hue reads as chosen, a mid-grey reads as default. */
    --wz-white: #ffffff;
    --wz-ground: #f4f7fc;
    --wz-ground-2: #eaf0f9;
    --wz-ink: #071a32;
    --wz-ink-muted: #52657f;
    --wz-ink-faint: #7c8da4;
    /* Light-ground decoration. The dark bands carry the organic node mesh; the
       light ones carry its ordered counterpart - the same node, on a lattice, or
       swept into hairline arcs. Both halves of the page speak one vocabulary
       without repeating a picture. Kept faint on purpose: this sits behind body
       copy, so it has to survive being ignored. */
    --wz-deco-node: rgba(22, 87, 199, 0.14);
    --wz-deco-line: rgba(22, 87, 199, 0.09);
    --wz-deco-wash: rgba(46, 123, 246, 0.05);

    --wz-rule: #d8e2f0;
    --wz-rule-strong: #bccbe0;

    /* --- On dark surfaces ----------------------------------------------- */
    --wz-on-dark: #e8f0fb;
    --wz-on-dark-muted: #a9c0dc;
    --wz-on-dark-faint: #7d97b8;
    --wz-on-dark-rule: rgba(90, 182, 255, 0.2);
    --wz-on-dark-panel: rgba(90, 182, 255, 0.06);

    /* --- Status --------------------------------------------------------- */
    --wz-success: #12805c;
    --wz-error: #c0341f;
    --wz-warning: #9a6206;

    /* --- Focus ---------------------------------------------------------- */
    /* One ring for the whole site, on both light and dark grounds. */
    --wz-focus: var(--wz-azure);
    --wz-focus-on-dark: var(--wz-sky);
    --wz-focus-width: 3px;
    --wz-focus-offset: 3px;

    /* --- Type ----------------------------------------------------------- */
    --wz-font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --wz-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Fluid scale. Every heading on the site comes from this ladder; nothing
       sets an arbitrary font-size. */
    --wz-fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
    --wz-fs-h1: clamp(2.05rem, 1.5rem + 2.3vw, 3rem);
    --wz-fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem);
    --wz-fs-h3: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
    --wz-fs-h4: 1.0625rem;
    --wz-fs-lead: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
    --wz-fs-body: 1.0625rem;
    --wz-fs-sm: 0.9375rem;
    --wz-fs-xs: 0.8125rem;
    --wz-fs-label: 0.75rem;

    --wz-lh-tight: 1.06;
    --wz-lh-heading: 1.2;
    --wz-lh-body: 1.65;

    --wz-tracking-label: 0.15em;
    --wz-tracking-display: -0.02em;

    /* Running text stays readable rather than stretching to the shell. */
    --wz-measure: 66ch;

    /* --- Space ---------------------------------------------------------- */
    --wz-s-1: 4px;
    --wz-s-2: 8px;
    --wz-s-3: 12px;
    --wz-s-4: 16px;
    --wz-s-5: 24px;
    --wz-s-6: 32px;
    --wz-s-7: 40px;
    --wz-s-8: 56px;
    --wz-s-9: 72px;
    --wz-s-10: 96px;

    /* --- Layout --------------------------------------------------------- */
    --wz-shell: 1200px;
    --wz-shell-narrow: 860px;
    --wz-gutter: clamp(20px, 4vw, 40px);
    --wz-section-y: clamp(64px, 8vw, 112px);
    --wz-header-h: 76px;

    /* --- Radii ---------------------------------------------------------- */
    --wz-r-sm: 6px;
    --wz-r: 12px;
    --wz-r-lg: 20px;
    --wz-r-pill: 999px;

    /* --- Elevation ------------------------------------------------------ */
    --wz-shadow-sm: 0 1px 2px rgba(7, 26, 50, 0.06), 0 2px 8px rgba(7, 26, 50, 0.04);
    --wz-shadow: 0 2px 6px rgba(7, 26, 50, 0.07), 0 12px 28px rgba(7, 26, 50, 0.07);
    --wz-shadow-lg: 0 4px 12px rgba(7, 26, 50, 0.09), 0 24px 56px rgba(7, 26, 50, 0.12);

    /* --- Motion --------------------------------------------------------- */
    --wz-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --wz-dur-fast: 130ms;
    --wz-dur: 210ms;
    --wz-dur-slow: 380ms;
}

/* Anyone who has asked their OS to reduce motion gets no transitions at all,
   rather than shorter ones. Set once, honoured everywhere. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --wz-dur-fast: 0ms;
        --wz-dur: 0ms;
        --wz-dur-slow: 0ms;
    }
}