/**
 * Zenith Eco Energy — Design Tokens
 *
 * Single source of truth for colour, type, spacing and elevation.
 * Everything else in the theme (and the Elementor kit) reads from here,
 * so a rebrand is a change in this one file.
 */

:root {
  /* ---- Brand ------------------------------------------------------ */
  --zen-blue-900: #0b2545;   /* headings on light */
  --zen-blue-800: #10366b;
  --zen-blue-700: #14508c;
  --zen-blue-600: #1560bd;   /* primary action */
  --zen-blue-500: #2b7fd4;
  --zen-blue-100: #e8f1fb;   /* tinted panels */
  --zen-blue-050: #f4f8fd;

  --zen-red-700:  #b3151b;
  --zen-red-600:  #d21f26;   /* emergency bar, alerts */
  --zen-red-100:  #fdeaea;

  /* ---- Neutrals (cool-biased to sit with the blue) ---------------- */
  --zen-ink:      #12181d;
  --zen-ink-2:    #46535f;
  --zen-ink-3:    #6b7885;
  --zen-line:     #dde3e9;
  --zen-line-2:   #c6d0da;
  --zen-surface:  #ffffff;
  --zen-sunk:     #f5f7fa;
  --zen-page:     #ffffff;

  /* ---- Semantic --------------------------------------------------- */
  --zen-ok:       #17795e;
  --zen-ok-100:   #e3f3ee;
  --zen-warn:     #9a6a10;
  --zen-warn-100: #fbf0da;
  --zen-danger:   var(--zen-red-600);

  /* ---- Type ------------------------------------------------------- */
  --zen-font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale, 320px → 1440px viewport */
  --zen-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --zen-step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --zen-step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.44rem);
  --zen-step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.90rem);
  --zen-step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.50rem);
  --zen-step-4:  clamp(2.07rem, 1.70rem + 1.85vw, 3.30rem);
  --zen-step-5:  clamp(2.49rem, 1.90rem + 2.95vw, 4.30rem);

  --zen-leading-tight: 1.15;
  --zen-leading-head:  1.22;
  --zen-leading-body:  1.65;

  --zen-weight-normal: 400;
  --zen-weight-medium: 500;
  --zen-weight-bold:   700;
  --zen-weight-black:  800;

  /* ---- Space (4px base) ------------------------------------------- */
  --zen-space-1:  0.25rem;
  --zen-space-2:  0.5rem;
  --zen-space-3:  0.75rem;
  --zen-space-4:  1rem;
  --zen-space-5:  1.5rem;
  --zen-space-6:  2rem;
  --zen-space-7:  3rem;
  --zen-space-8:  4rem;
  --zen-space-9:  6rem;

  /* Vertical rhythm between page sections */
  --zen-section-y: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);

  /* ---- Layout ------------------------------------------------------ */
  --zen-container: 1200px;
  --zen-container-narrow: 820px;
  --zen-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ---- Radius & elevation ------------------------------------------ */
  --zen-radius-sm: 4px;
  --zen-radius:    8px;
  --zen-radius-lg: 14px;
  --zen-radius-pill: 999px;

  --zen-shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06),
                   0 1px 3px rgba(11, 37, 69, 0.08);
  --zen-shadow:    0 2px 4px rgba(11, 37, 69, 0.06),
                   0 6px 16px rgba(11, 37, 69, 0.10);
  --zen-shadow-lg: 0 8px 24px rgba(11, 37, 69, 0.12),
                   0 2px 6px rgba(11, 37, 69, 0.08);

  /* ---- Motion ------------------------------------------------------ */
  --zen-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --zen-dur-fast: 120ms;
  --zen-dur: 200ms;

  /* ---- Focus ring (accessibility, never remove) -------------------- */
  --zen-focus: 0 0 0 3px rgba(21, 96, 189, 0.35);
}

/* Respect the visitor's motion preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --zen-dur-fast: 0ms;
    --zen-dur: 0ms;
  }
}