/* =============================================================================
   Energia Residence — Design Tokens (single source of truth)
   All colors verified for WCAG AA at their intended use (see notes inline).
   Mirror of these values is registered as Blocksy + Elementor Global Colors/Fonts
   so admins can edit visually; keep the two in sync when changing brand values.
   ============================================================================= */

:root {
  /* ---- Brand palette ---- */
  --en-warm-white: #faf8f5;   /* page surface */
  --en-white:      #ffffff;   /* cards / raised surfaces */
  --en-cream:      #f2eee8;   /* alt section band */
  --en-anthracite: #1e2124;   /* primary text on light (AA on warm-white) */
  --en-ink-2:      #33373b;   /* dark surface alt */
  --en-grey-line:  #e7e4df;   /* borders / dividers */
  --en-grey-mut:   #6b6a67;   /* secondary text (≈4.9:1 on warm-white — AA) */

  /* Deep forest green — dominant brand tone (dark sections, footer, hero overlay) */
  --en-green-900: #14302a;   /* primary dark surface (from mockups) */
  --en-green-800: #1b3a32;   /* alt dark surface / cards on green */
  --en-green-700: #24493f;   /* borders / hover on green */
  --en-on-green:  #eef2ef;   /* body text on green (high contrast) */
  --en-on-green-mut: #b9c7c1; /* secondary text on green */

  /* Bronze / copper accent inspired by the facade + Energia identity */
  --en-accent:        #c07a45; /* decorative copper accent, icons, numbers on dark */
  --en-accent-strong: #a65e1f; /* CTA background — white text = 4.95:1 (AA) */
  --en-accent-hover:  #8f4f18; /* CTA hover */
  --en-accent-soft:   #f6e9db; /* soft accent surface */
  --en-accent-tint:   #f7ecdf; /* accent wash background */

  /* Status colors (apartment availability) — all AA on white */
  --en-status-available: #1f7a4d;
  --en-status-reserved:  #b6791b;
  --en-status-sold:      #9a2f2f;

  /* ---- Typography ---- */
  /* Default: high-quality self-hosted-quality system stack (zero external requests).
     To brand: drop woff2 files in assets/fonts/, uncomment @font-face in theme.css,
     and set --en-font-head / --en-font-body accordingly. */
  /* Headings: elegant serif (mockup look). Georgia is a high-quality system serif —
     zero external requests. Swap for self-hosted "Playfair Display" via @font-face
     in theme.css if desired (set --en-font-head to it). */
  --en-font-head: "Energia Display", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --en-font-body: "Energia Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --en-fs-300: 0.875rem;  /* 14 */
  --en-fs-400: 1rem;      /* 16 base */
  --en-fs-500: 1.125rem;  /* 18 */
  --en-fs-600: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* h4 */
  --en-fs-700: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);      /* h3 */
  --en-fs-800: clamp(1.9rem, 1.4rem + 2.4vw, 2.75rem);    /* h2 */
  --en-fs-900: clamp(2.25rem, 1.6rem + 3.4vw, 3.5rem);    /* h1 / hero */

  --en-lh-tight: 1.15;
  --en-lh-snug:  1.3;
  --en-lh-body:  1.6;
  --en-fw-normal: 400;
  --en-fw-med:    500;
  --en-fw-semi:   600;
  --en-fw-bold:   700;
  --en-track-tight: -0.01em;

  /* ---- Spacing scale (8px base) ---- */
  --en-sp-1: 0.25rem;
  --en-sp-2: 0.5rem;
  --en-sp-3: 0.75rem;
  --en-sp-4: 1rem;
  --en-sp-5: 1.5rem;
  --en-sp-6: 2rem;
  --en-sp-7: 3rem;
  --en-sp-8: 4rem;
  --en-sp-9: 6rem;
  --en-section-y: clamp(3rem, 2rem + 5vw, 6rem); /* vertical section rhythm */

  /* ---- Layout ---- */
  --en-container: 1200px;
  --en-container-wide: 1400px;
  --en-container-narrow: 760px;
  --en-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* ---- Radii / borders / shadows ---- */
  --en-radius-sm: 6px;
  --en-radius:    12px;
  --en-radius-lg: 20px;
  --en-radius-pill: 999px;
  --en-border: 1px solid var(--en-grey-line);
  --en-shadow-sm: 0 1px 2px rgba(30,33,36,.06), 0 1px 3px rgba(30,33,36,.05);
  --en-shadow:    0 4px 16px rgba(30,33,36,.08);
  --en-shadow-lg: 0 12px 40px rgba(30,33,36,.14);

  /* ---- Motion (transform/opacity only) ---- */
  --en-ease: cubic-bezier(.22,.61,.36,1);
  --en-dur-1: 140ms;
  --en-dur-2: 240ms;

  /* ---- Z-index scale ---- */
  --en-z-sticky: 100;
  --en-z-drawer: 900;
  --en-z-overlay: 890;
  --en-z-popup: 1000;

  /* ---- Focus ---- */
  --en-focus-ring: 3px solid var(--en-accent);
  --en-focus-offset: 2px;
}

/* Breakpoints are documented for reference (used via media queries in theme.css):
   mobile   : 360–430px  (base, no min-width)
   tablet   : >= 768px
   laptop   : >= 1024px
   desktop  : >= 1280px
   wide     : >= 1440px  */

@media (prefers-reduced-motion: reduce) {
  :root { --en-dur-1: 0ms; --en-dur-2: 0ms; }
}