/* ==========================================================================
   ESTILOS GLOBAIS E IDENTIDADE VISUAL — YK CLOSET • BY YASMIN KAREN
   Arquivo: styles/main.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIÁVEIS DE SISTEMA E TOKENS DE DESIGN (TEMA DE INVERNO / BRANCO-GELO)
   -------------------------------------------------------------------------- */
:root {
  /* Cores de Fundo Feminino & Sofisticado / Off-White & Blush */
  --bg-deep: #ffffff;
  --bg-ice: #ffffff;
  --bg-surface: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;

  /* Tipografia e Cores de Texto de Alto Contraste */
  --font-family: 'Raleway', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-main: #18181b;        /* Grafite profundo / Zinc 900 */
  --text-dim: #3f3f46;         /* Zinc 700 */
  --text-muted: #71717a;       /* Zinc 500 */
  --text-faint: #a1a1aa;       /* Zinc 400 */

  /* Acentos YK Closet: Ouro Rosé, Champanhe & Blush */
  --accent-gold: #c59b4e;       /* Ouro refinado */
  --accent-gold-light: #dfb76c; /* Ouro champanhe suave */
  --accent-gold-glow: rgba(223, 183, 108, 0.35);
  --accent-rose: #d47a82;       /* Rosé elegante */
  --accent-rose-light: #fce8e6; /* Blush delicado */
  --accent-blush: #fff5f5;      /* Fundo suave feminino */
  --grad-primary: linear-gradient(135deg, #c59b4e 0%, #dfb76c 50%, #e8c792 100%);
  --grad-rose: linear-gradient(135deg, #e8989f 0%, #d47a82 100%);
  --grad-card-border: linear-gradient(135deg, rgba(223, 183, 108, 0.5), rgba(244, 199, 195, 0.4));

  /* Identidades de Redes Sociais Oficiais: WhatsApp & Instagram */
  --color-instagram: #e1306c;
  --glow-instagram: rgba(225, 48, 108, 0.35);
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #128c7e;
  --glow-whatsapp: rgba(37, 211, 102, 0.35);

  /* Dimensões Adaptativas */
  --avatar-size: clamp(100px, 15vh, 136px);
  --dial-size: 52px;
  --dial-spacing: 64px;
  --sheet-radius: clamp(24px, 4vw, 36px);

  /* Curvas de Animação */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.35, 1);
}

/* --------------------------------------------------------------------------
   2. RESET E REGRAS DE ROLAGEM VERTICAL CONTÍNUA
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  background-color: #ffffff;
  color: var(--text-main);
  font-family: var(--font-family);
}

body {
  width: 100%;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto; /* Rolagem vertical fluida habilitada */
  background-color: #ffffff;
  position: relative;
  touch-action: pan-y;
  font-family: var(--font-family);
}

button, input, select, textarea {
  font-family: inherit;
}

/* Custom Scrollbar Elegante em Tom Rosé-Champanhe */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #faf6f5;
}

::-webkit-scrollbar-thumb {
  background: rgba(223, 183, 108, 0.55);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c59b4e;
}

/* --------------------------------------------------------------------------
   3. CAMADA FIXA DE CANVAS DE NEVE EM TEMPO REAL
   -------------------------------------------------------------------------- */
#snow-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 12; /* Visível sobre o fundo branco e durante a rolagem da vitrine */
  display: block;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. ACESSIBILIDADE E PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #snow-canvas {
    opacity: 0.3;
  }
}