/* COPA Homes — design tokens.
   Single source of truth for brand colors, type, spacing, motion.
   Every shared component reads from here. Defined in :root so any
   page that loads this file (or homepage.css which @imports it) has
   access. Tokens are intentionally named by role, not value, so a
   future palette tweak ripples everywhere. */

:root {
  /* Brand palette */
  --copa-navy:        #0A0B1A;
  --copa-navy-soft:   #161021;
  --copa-lime:        #D8FF2F;
  --copa-pink:        #FF2B8A;
  --copa-pink-hover:  #ff479a;
  --copa-cyan:        #2BC7D9;
  --copa-warm:        #F8F6F1;
  --copa-warm-card:   #FAF9F5;
  --copa-paper:       #ffffff;
  --copa-ink:         #0A0B1A;
  --copa-ink-soft:    #4a4742;
  --copa-muted:       #6b6862;

  /* Type — Poppins for display, Montserrat for body */
  --copa-font-display: 'Poppins', system-ui, sans-serif;
  --copa-font-body:    'Montserrat', -apple-system, system-ui, sans-serif;

  /* Display scale — H1 and H2 sizes, clamped responsive.
     H1 cap of 3.4rem matches storm-response (the canonical reference). */
  --copa-fs-h1:       clamp(2rem, 5.5vw, 3.4rem);
  --copa-fs-h2:       clamp(1.8rem, 4vw, 2.4rem);
  --copa-fs-h3:       clamp(1.15rem, 1.8vw, 1.35rem);
  --copa-fs-lede:     clamp(1rem, 1.5vw, 1.18rem);
  --copa-fs-body:     0.96rem;
  --copa-fs-small:    0.82rem;
  --copa-fs-eyebrow:  0.74rem;

  /* Spacing scale */
  --copa-sp-1: 6px;
  --copa-sp-2: 12px;
  --copa-sp-3: 18px;
  --copa-sp-4: 24px;
  --copa-sp-5: 32px;
  --copa-sp-6: 48px;
  --copa-sp-7: 64px;
  --copa-sp-8: 90px;

  /* Wrap widths — 1100px matches storm-response, used by all heroes */
  --copa-wrap-narrow:  720px;
  --copa-wrap:         1100px;
  --copa-wrap-wide:    1240px;

  /* Radii */
  --copa-r-1:    8px;
  --copa-r-2:    12px;
  --copa-r-3:    16px;
  --copa-r-pill: 999px;

  /* Shadows */
  --copa-shadow-cta:  0 8px 22px rgba(255, 43, 138, 0.32);
  --copa-shadow-card: 0 8px 24px rgba(10, 11, 26, 0.05);
  --copa-shadow-lift: 0 14px 30px rgba(10, 11, 26, 0.08);

  /* Motion */
  --copa-tx-fast: 0.15s;
  --copa-tx:      0.2s;
  --copa-tx-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1);

  /* Hero — the canonical 95° gradient + heights, lifted from storm-response */
  --copa-hero-overlay: linear-gradient(95deg, rgba(10,11,26,0.92) 0%, rgba(10,11,26,0.72) 45%, rgba(10,11,26,0.35) 100%);
  --copa-hero-overlay-mobile: linear-gradient(180deg, rgba(10,11,26,0.88) 0%, rgba(10,11,26,0.78) 60%, rgba(10,11,26,0.92) 100%);
  --copa-hero-min-h:   clamp(560px, 78vh, 800px);
}