/* ==========================================================================
   Breeze Builders — Design Tokens
   Brand palette "El Plano Maestro" (client-approved):
   MIDNIGHT #0C3A59 · EMBER #D84545 · SAND #DDD0C0 · SLATE #575859 · BREEZE #D3E3F0 · UMBER #3D0606
   Token names keep the original navy/gold naming so components stay stable.
   ========================================================================== */

:root {
  /* --- Color --- */
  --navy:        #0c3a59;   /* MIDNIGHT — primary: heroes, footer, bands */
  --navy-700:    #124a72;   /* midnight raised — panels / cards on dark */
  --navy-900:    #072940;   /* midnight deep — footer base, gradients */
  --gold:        #d84545;   /* EMBER — single accent: decision points, CTAs, icons */
  --gold-600:    #a93232;   /* ember deep — hover / accent text on light */
  --umber:       #3d0606;   /* UMBER — reserved deep support tone */
  --ink:         #26282a;   /* body text on light (slate-black) */
  --muted:       #575859;   /* SLATE — secondary text */
  --line:        #dbe5ee;   /* breeze-tinted hairlines on light */
  --paper:       #ffffff;   /* light section base */
  --mist:        #eef4f9;   /* BREEZE tint — alt light sections (brand mockups use breeze, not sand) */
  --sky:         #d3e3f0;   /* BREEZE — light panels, as on the billboard */
  --on-dark:     #dce9f4;   /* BREEZE — body text on midnight (the calm note) */
  --on-dark-dim: #a7c0d4;   /* breeze dim — secondary text on midnight */

  /* --- Type --- */
  --font-display: "Tomorrow", Arial, sans-serif;
  --font-body:    Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* fluid type scale (1.20 minor-third-ish, tuned for a 45–64 audience: generous) */
  --fs-eyebrow: 0.78rem;
  --fs-small:   0.92rem;
  --fs-body:    clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem);
  --fs-lead:    clamp(1.18rem, 1.10rem + 0.5vw, 1.4rem);
  --fs-h3:      clamp(1.25rem, 1.15rem + 0.6vw, 1.55rem);
  --fs-h2:      clamp(1.55rem, 1.3rem + 1.2vw, 2.3rem);
  --fs-h1:      clamp(2.2rem, 1.7rem + 2.6vw, 3.6rem);
  --fs-display: clamp(2.6rem, 1.9rem + 3.4vw, 4.4rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  /* --- Space --- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;

  --wrap:    1440px;
  --gutter:  clamp(1.25rem, 3.5vw, 3rem);   /* side padding inside .wrap */
  --wrap-sm: 760px;

  /* Squared-off, engineered corners (brand mockups); chamfers via --cut */
  --radius:    3px;
  --radius-lg: 4px;
  --cut:       22px;

  --shadow-sm: 0 1px 2px rgba(7, 41, 64, 0.06), 0 2px 8px rgba(7, 41, 64, 0.05);
  --shadow-md: 0 8px 30px rgba(7, 41, 64, 0.10);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}