/* ============================================================================
   Conforta Colchões — Design Tokens
   Fonte única de verdade para cores, tipografia, espaçamento, raios, sombras,
   z-index, transições e breakpoints. Carregue ANTES dos demais CSS.
   Paleta quente/premium para colchões, camas, sofás e estofados.
   ========================================================================== */
:root {
  /* ---- Marca / institucional (azul escuro elegante) ---- */
  --cc-brand:        #1f3a5f;
  --cc-brand-700:    #16304c;
  --cc-brand-800:    #102338;
  --cc-brand-600:    #2d5380;
  --cc-brand-tint:   #eef2f8;   /* fundo suave azul */

  /* ---- Fundos quentes / off-white + areia (aconchego) ---- */
  --cc-bg:           #faf6f0;   /* página (off-white quente) */
  --cc-bg-warm:      #f5efe6;   /* painel/seção alternada */
  --cc-surface:      #ffffff;   /* cards */
  --cc-sand:         #e8dcc9;
  --cc-sand-soft:    #f3ead9;
  --cc-sand-deep:    #d8c7ad;

  /* ---- Confiança (verde) ---- */
  --cc-success:      #2f7d54;
  --cc-success-700:  #245f40;
  --cc-success-tint: #e8f3ec;

  /* ---- Oferta / urgência (laranja — usar com parcimônia) ---- */
  --cc-accent:       #e07a3a;
  --cc-accent-700:   #c4631f;
  --cc-accent-tint:  #fdeee1;

  /* ---- WhatsApp ---- */
  --cc-whatsapp:     #25b14c;
  --cc-whatsapp-700: #1e9a41;

  /* ---- Texto e cinzas suaves ---- */
  --cc-ink:          #25303b;   /* títulos / texto forte */
  --cc-text:         #41505e;   /* corpo */
  --cc-muted:        #6c7a88;   /* secundário */
  --cc-faint:        #9aa6b1;   /* placeholder / hint */
  --cc-line:         #e7ddd0;   /* borda quente */
  --cc-line-soft:    #f0e9de;
  --cc-danger:       #c2410c;
  --cc-danger-strong:#b91c1c;
  --cc-white:        #ffffff;

  /* ---- Tipografia ---- */
  --cc-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cc-font-display: var(--cc-font-sans);

  /* escala modular ~1.2 (fluida onde faz sentido) */
  --cc-fs-xs:   0.75rem;    /* 12 */
  --cc-fs-sm:   0.875rem;   /* 14 */
  --cc-fs-base: 1rem;       /* 16 */
  --cc-fs-md:   1.125rem;   /* 18 */
  --cc-fs-lg:   clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --cc-fs-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --cc-fs-2xl:  clamp(1.9rem, 1.4rem + 2.4vw, 2.75rem);
  --cc-fs-3xl:  clamp(2.3rem, 1.6rem + 3.4vw, 3.5rem);

  --cc-lh-tight: 1.12;
  --cc-lh-snug:  1.3;
  --cc-lh-base:  1.6;
  --cc-tracking-tight: -0.02em;
  --cc-tracking-wide:  0.08em;

  /* ---- Espaçamento (base 4px) ---- */
  --cc-sp-1: 4px;  --cc-sp-2: 8px;  --cc-sp-3: 12px; --cc-sp-4: 16px;
  --cc-sp-5: 20px; --cc-sp-6: 24px; --cc-sp-8: 32px; --cc-sp-10: 40px;
  --cc-sp-12: 48px; --cc-sp-16: 64px; --cc-sp-20: 80px; --cc-sp-24: 96px;

  /* ---- Container ---- */
  --cc-container: 1200px;
  --cc-container-pad: clamp(16px, 4vw, 28px);

  /* ---- Raios ---- */
  --cc-radius-sm: 8px;
  --cc-radius:    14px;
  --cc-radius-lg: 20px;
  --cc-radius-xl: 28px;
  --cc-radius-pill: 999px;

  /* ---- Sombras (tom quente/azulado, suaves) ---- */
  --cc-shadow-xs: 0 1px 2px rgba(31, 58, 95, 0.06);
  --cc-shadow-sm: 0 4px 14px rgba(31, 58, 95, 0.07);
  --cc-shadow:    0 10px 30px rgba(31, 58, 95, 0.10);
  --cc-shadow-lg: 0 20px 48px rgba(31, 58, 95, 0.14);
  --cc-shadow-brand: 0 14px 30px rgba(31, 58, 95, 0.26);

  /* ---- Z-index ---- */
  --cc-z-base: 1;
  --cc-z-header: 100;
  --cc-z-dropdown: 200;
  --cc-z-overlay: 1000;
  --cc-z-modal: 1100;
  --cc-z-toast: 1200;

  /* ---- Transições ---- */
  --cc-transition-fast: 0.15s ease;
  --cc-transition: 0.22s ease;
  --cc-transition-slow: 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Layout ---- */
  --cc-header-h: 64px;
}

/* Breakpoints de referência (usados via @media nos arquivos de página):
   sm 480px · md 768px · lg 1024px · xl 1200px */