/* ============================================================
   CENTRAL PARK RESIDENCES — DESIGN TOKENS
   variables.css
   ------------------------------------------------------------
   Extracted verbatim from the design's :root block (assets/site.css).
   Values are unchanged. The "extended tokens" block adds custom
   properties that mirror values used inline throughout the design
   (shadows, breakpoints, type scale, section spacing) so modular
   components can reference them. Adding unused custom properties has
   ZERO rendering effect — the design is not changed.

   Load order: variables → core → utilities → animations → responsive
   ============================================================ */

:root{
  /* ---- Colors (exact) ---- */
  --bg:#ffffff;
  --bg-soft:#f3f2ee;
  --bg-soft-2:#eceae3;
  --dark:#151513;
  --dark-2:#1d1d1a;
  --dark-card:#232320;
  --lime:#cdf24a;
  --lime-deep:#bfe83b;
  --ink:#16160f;
  --muted:#6e6e66;
  --muted-d:#a8a89f;          /* muted on dark */
  --line:#e4e2da;
  --line-d:rgba(255,255,255,.12);

  /* ---- Radius (exact) ---- */
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --r-pill:999px;

  /* ---- Font family (exact) ---- */
  --sans:'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---- Motion easing (exact) ---- */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- Container + gutter (exact) ---- */
  --maxw:1280px;
  --gutter:clamp(20px,4.4vw,64px);

  /* ============================================================
     EXTENDED TOKENS — additive, non-breaking.
     Values below are lifted verbatim from inline rules in the
     design so components can reference them by name. They do not
     alter any existing rendering.
     ============================================================ */

  /* ---- Shadows (as used in the design) ---- */
  --glow-lime:0 0 0 4px rgba(205,242,74,.25);          /* .eyebrow::before */
  --shadow-card:0 24px 50px -28px rgba(21,21,19,.4);   /* .amen-card:hover */

  /* ---- Type scale (fluid clamps, exact) ---- */
  --fs-hero:clamp(44px,7vw,104px);      /* .hero h1 */
  --fs-cta:clamp(40px,7vw,108px);       /* .cta h2 */
  --fs-kicker:clamp(28px,3.7vw,52px);   /* .kicker */
  --fs-lede:clamp(15px,1.15vw,17px);    /* .lede */
  --fs-eyebrow:12px;                    /* .eyebrow */
  --fs-btn:14px;                        /* .btn */
  --fs-base:16px;                       /* body */

  /* ---- Section spacing (fluid clamps, exact) ---- */
  --section-y:clamp(80px,9vw,140px);    /* standard light/dark sections */
  --section-y-band:clamp(70px,8vw,120px); /* .statband / .testi */
  --section-y-cta:clamp(90px,11vw,170px); /* .cta */

  /* ---- Breakpoints (reference only — CSS vars cannot be used
     inside @media; kept here to document the scale) ---- */
  --bp-lg:980px;   /* nav collapse */
  --bp-md:880px;   /* most grids → 1 col */
  --bp-sm:760px;   /* stacking + sticky mobile CTA */
  --bp-xs:640px;   /* map overlay static */
  --bp-xxs:560px;  /* footer → 1 col */
}