/* ==========================================================================
   CASA DO SAGRADO — DESIGN TOKENS & ESTILOS BASE (LIGHT THEME NOBRE)
   ========================================================================== */
:root {
  /* Superfícies & Canvas */
  --color-canvas-bg:          #FAF9F6; /* Linho marfim nobre de fundo */
  --color-canvas-surface:     #FFFFFF; /* Branco puro de catálogo */
  --color-canvas-subtle:      #F7F5F0; /* Linho suave para tarjas e caixas */
  --color-canvas-muted:       #EFEAE1; /* Superfície neutra para fotos */
  --color-canvas-topbar:      #111111; /* Preto solene para top bar de alto contraste */
  --color-canvas-overlay:     rgba(17, 17, 17, 0.55);

  /* Tipografia & Contraste (WCAG AA & AAA) */
  --color-text-primary:       #111111; /* Preto profundo litúrgico (16.5:1) */
  --color-text-secondary:     #333333; /* Carvão escuro para descrições (12.6:1) */
  --color-text-muted:         #666666; /* Cinza mineral para fichas e reviews (5.7:1) */
  --color-text-price-old:     #999999; /* Cinza riscado para preços "De:" */
  --color-text-inverse:       #FFFFFF; /* Branco puro sobre fundos escuros e botões */

  /* Vermelho Sagrado Oficial (Marca) */
  --color-brand-red:          #E60000; /* Vermelho rubro oficial de alta energia */
  --color-brand-red-hover:    #C40000;
  --color-brand-red-active:   #A80000;
  --color-brand-red-soft:     rgba(230, 0, 0, 0.08);
  --color-brand-red-glow:     rgba(230, 0, 0, 0.16);

  /* Ouro Litúrgico Acetinado */
  --color-brand-gold:         #C5A059; /* Ouro nobre acetinado */
  --color-brand-gold-hover:   #AD8841;
  --color-brand-gold-soft:    rgba(197, 160, 89, 0.12);
  --color-brand-gold-border:  #DDCBB0;

  /* Vinho Nobre Institucional */
  --color-brand-wine:         #5C131E;
  --color-brand-wine-hover:   #470D16;
  --color-brand-wine-soft:    rgba(92, 19, 30, 0.08);

  /* Bordas & Divisores */
  --color-border-card:        #EBEBEB; /* Borda canônica dos cards Kalan */
  --color-border-subtle:      #E8E4DD; /* Divisores horizontais */
  --color-border-input:       #CCCCCC; /* Borda neutra de input */
  --color-border-focus:       #E60000; /* Foco acessível */

  /* Status & Canais Oficiais */
  --color-whatsapp:           #25D366;
  --color-whatsapp-hover:     #1EBE5D;
  --color-whatsapp-soft:      rgba(37, 211, 102, 0.12);
  --color-status-success:     #1B7A43;
  --color-status-badge-bg:    #EBF6EE;
  --color-status-warning:     #B45309;
  --color-status-warning-bg:  #FEF3C7;

  /* Famílias Tipográficas */
  --font-display: 'Cinzel', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Escala Tipográfica Fluida */
  --font-size-2xs:    clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);   /* 11px - 12px */
  --font-size-xs:     clamp(0.75rem,   0.72rem + 0.20vw, 0.8125rem); /* 12px - 13px */
  --font-size-sm:     clamp(0.875rem,  0.83rem + 0.25vw, 0.9375rem); /* 14px - 15px */
  --font-size-base:   clamp(1.00rem,   0.95rem + 0.30vw, 1.0625rem); /* 16px - 17px */
  --font-size-lg:     clamp(1.125rem,  1.05rem + 0.45vw, 1.25rem);   /* 18px - 20px */
  --font-size-xl:     clamp(1.25rem,   1.15rem + 0.70vw, 1.50rem);   /* 20px - 24px */
  --font-size-2xl:    clamp(1.50rem,   1.35rem + 1.10vw, 2.00rem);   /* 24px - 32px */
  --font-size-3xl:    clamp(1.875rem,  1.60rem + 1.80vw, 2.75rem);   /* 30px - 44px */
  --font-size-hero:   clamp(2.125rem,  1.75rem + 2.40vw, 3.25rem);   /* 34px - 52px */

  /* Espaçamentos Fluidos */
  --space-3xs:    clamp(2px,  0.3vw,  4px);
  --space-2xs:    clamp(4px,  0.6vw,  8px);
  --space-xs:     clamp(8px,  1.0vw, 12px);
  --space-sm:     clamp(12px, 1.4vw, 16px);
  --space-md:     clamp(16px, 2.2vw, 24px);
  --space-lg:     clamp(24px, 3.2vw, 36px);
  --space-xl:     clamp(36px, 4.8vw, 56px);
  --space-2xl:    clamp(48px, 6.4vw, 80px);
  --space-3xl:    clamp(64px, 8.5vw, 104px);

  /* Dimensões dos Containers */
  --container-max-width:       1280px;
  --container-narrow-width:     980px;
  --container-inline-pad:      clamp(16px, 3.5vw, 32px);

  /* Raios de Borda */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-circle: 50%;

  /* Sombras Sutis de Física Real */
  --shadow-subtle:     0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-card:       0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.09), 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-header:     0 2px 14px rgba(0, 0, 0, 0.06);
  --shadow-floating:   0 6px 20px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);

  /* Transições Rápidas Aceleradas por Hardware */
  --transition-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 240ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Hierarquia Z-Index */
  --z-sticky-header:    100;
  --z-nav-categories:   95;
  --z-floating-cta:     400;
  --z-toast:            850;
  --z-modal-backdrop:   900;
  --z-modal-dialog:     950;
  --z-drawer-backdrop:  1000;
  --z-drawer-panel:     1100;
}

/* ==========================================================================
   RESET MODERNO & CONFIGURAÇÕES GLOBAIS
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-brand-wine) var(--color-canvas-subtle);
  scrollbar-width: thin;
}

/* Barra de Rolagem Personalizada em Vinho Nobre */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-canvas-subtle);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-brand-wine);
  border-radius: 6px;
  border: 2px solid var(--color-canvas-subtle);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-brand-wine-hover);
}

::-webkit-scrollbar-button {
  display: none !important;
  width: 0;
  height: 0;
}

html {
  box-sizing: border-box;
  overflow-x: clip;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-canvas-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  touch-action: manipulation;
}

/* Prevenção de Zoom no iOS Safari (accessible-forms.md) */
input, select, textarea {
  font-family: inherit;
  font-size: 16px !important;
  color: var(--color-text-primary);
  touch-action: manipulation;
}

/* Touch targets ergonômicos (mobile-touch-ergonomics.md) */
.touch-target, 
.btn, 
.action-btn, 
.nav-link-item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Container responsivo */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-inline-pad);
}