/* ============================================================
   NUVVO DESIGN — Design Tokens
   Manual de Identidade Visual oficial + extensões derivadas
   ============================================================ */

:root {
  /* ---------- CORES — MARCA (oficiais) ---------- */
  --color-taupe:         #9F8D7A;
  --color-cream:         #F0EDE4;
  --color-burgundy:      #50071A;

  /* ---------- CORES — DERIVADAS ---------- */
  --color-taupe-dark:    #7A6B5C;
  --color-taupe-soft:    #C4B6A5;
  --color-cream-warm:    #E8E3D6;
  --color-burgundy-soft: #7A2A3D;

  /* ---------- CORES — NEUTROS ---------- */
  --color-ink:           #1A1A1A;
  --color-ink-soft:      #4A4A4A;
  --color-ink-mute:      #8B8378;
  --color-line:          #E4E0D6;
  --color-white:         #FFFFFF;

  /* ---------- CORES — UTILITÁRIAS ---------- */
  --color-whatsapp:      var(--color-taupe-dark);
  --color-focus:         var(--color-burgundy);
  --color-overlay:       rgba(26, 26, 26, 0.40);
  --color-overlay-soft:  rgba(26, 26, 26, 0.15);
  --color-overlay-warm:  rgba(159, 141, 122, 0.92);

  /* ---------- SWIPER (tema) ----------
     O CSS do Swiper (CDN) carrega depois do nosso; estas variáveis são lidas
     em runtime pelo próprio Swiper, então vencem sem guerra de especificidade.
     Substituem o azul padrão (#007aff) pelo marrom da marca nos dots. */
  --swiper-pagination-color: var(--color-taupe-dark);
  --swiper-pagination-bullet-inactive-color: var(--color-taupe);
  --swiper-pagination-bullet-inactive-opacity: 0.4;

  /* ---------- TIPOGRAFIA — FAMÍLIAS ----------
     Bloom é paga; quando o arquivo chegar, substituir em fonts/ e o nome continua válido.
     Cormorant Garamond é o fallback editorial; DM Sans para Arquitecta. */
  --font-display: 'Bloom', 'Cormorant Garamond', 'Tenor Sans', Georgia, serif;
  --font-body:    'Raleway', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-tech:    'Arquitecta', 'DM Sans', 'Archivo', system-ui, sans-serif;

  /* ---------- TIPOGRAFIA — ESCALA FLUIDA (clamp) ---------- */
  --fs-hero:     clamp(2.5rem,  5vw + 1rem,    4.5rem);   /* 40 → 72 */
  --fs-h2:       clamp(2rem,    3vw + 1rem,    3rem);     /* 32 → 48 */
  --fs-h3:       clamp(1.5rem,  1.5vw + 1rem,  1.75rem);  /* 24 → 28 */
  --fs-big-num:  clamp(2.75rem, 5vw,          4.25rem);   /* 44 → 68 (cabe em 1/4 de coluna) */
  --fs-body-lg:  clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem); /* 17 → 20 */
  --fs-body:     clamp(1rem,    0.25vw + 0.9rem, 1.0625rem); /* 16 → 17 */
  --fs-cta:      0.9375rem;
  --fs-caption:  0.8125rem;

  /* ---------- TIPOGRAFIA — DETALHES ---------- */
  --lh-tight:    1.1;
  --lh-snug:     1.2;
  --lh-normal:   1.6;
  --tracking-tight: -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.08em;
  --tracking-mega:  0.14em;

  /* ---------- ESPAÇAMENTO (base 8) ---------- */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  3rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --space-8:  8rem;
  --space-9: 12rem;

  /* ---------- LAYOUT ---------- */
  --container-max:  1280px;
  --container-wide: 1440px;
  --gutter:         1.5rem;
  --pad-x:          clamp(1.5rem, 4vw, 5rem);

  /* ---------- FORMA ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---------- SOMBRA ---------- */
  --shadow-soft:       0 4px 24px rgba(26, 26, 26, 0.06);
  --shadow-card-hover: 0 12px 40px rgba(26, 26, 26, 0.10);
  --shadow-header:     0 1px 0 rgba(26, 26, 26, 0.06);
  --shadow-float:      0 8px 28px rgba(26, 26, 26, 0.18);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    600ms;
  --dur-reveal:  800ms;

  /* ---------- Z-INDEX ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-float:   500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-reveal: 0ms;
  }
}
