/* ============================================================
   PIAVE COSMETICS — DESIGN TOKENS v3.0
   Fonte: Brandbook oficial + Rebranding 2025
   Tipografia: Work Sans (única corporativa)
   Paleta principal: branco + verde-pistache + salmão + grafite
============================================================ */

/* ---------- FONT FACES (Work Sans self-hosted) ---------- */
@font-face {
  font-family: 'Work Sans';
  src: url('../assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../assets/fonts/WorkSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ========== CORES PRINCIPAIS (BRANDBOOK PANTONE) ========== */
  --piave-branco:        #FFFFFF;              /* Pureza, cuidado, nutrição. Fundo principal */
  --piave-verde:         #B4D6B9;              /* Pantone 559 C — frescor do pistache */
  --piave-verde-dark:    #94BFA0;              /* Hover/estado profundo */
  --piave-verde-soft:    #DDECDF;              /* Backgrounds tonais */
  --piave-salmao:        #F79883;              /* Pantone 2344 C — beleza, elegância */
  --piave-salmao-dark:   #E07A65;
  --piave-salmao-soft:   #FCD9D0;
  --piave-grafite:       #333333;              /* Cool Gray 11C — sofisticação, tecnologia */
  --piave-grafite-soft:  #4A4A4A;
  --piave-grafite-light: #888888;
  --piave-cinza-bg:      #F6F6F4;              /* Backgrounds neutros */
  --piave-divider:       #E5E5E2;

  /* ========== CORES POR LINHA (REBRANDING 2025) ========== */
  --linha-hydranutri:    #A5C5D9;              /* Azul claro — Home */
  --linha-fortifying:    #C75D43;              /* Laranja queimado — Home + PRO */
  --linha-smoothpro:     #6B8E7F;              /* Verde escuro — PRO */
  --linha-highlights:    #BFD8E8;              /* Azul céu — PRO */
  --linha-styling:       #8B7B9E;              /* Lilás — Home */
  --linha-bondrepair:    #B85A5A;              /* Vermelho terra — PRO */
  --linha-home:          #B4D6B9;              /* Verde claro — Home (fragrância) */
  --linha-eventos:       #A5C9A5;              /* Verde médio — Inspiração */
  --linha-saloes:        #3D4843;              /* Cinza escuro — parceria */

  /* ========== ESTADOS ========== */
  --piave-success:       #3CAC4B;
  --piave-warning:       #E0A93A;
  --piave-error:         #C75D43;
  --piave-whatsapp:      #25D366;

  /* ========== TIPOGRAFIA ========== */
  --font-sans:           'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Escala (desktop → mobile via clamp) */
  --fs-display:          clamp(3rem, 1.4rem + 5.5vw, 5.5rem);     /* 48 → 88px Hero */
  --fs-h1:               clamp(2.25rem, 1rem + 4.5vw, 4rem);      /* 36 → 64px */
  --fs-h2:               clamp(2rem, 1.2rem + 3.2vw, 3.5rem);     /* 32 → 56px */
  --fs-h3:               clamp(1.375rem, 1rem + 1.4vw, 1.75rem);  /* 22 → 28px */
  --fs-h4:               clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem); /* 18 → 22px */
  --fs-body-lg:          clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem); /* 17 → 19px */
  --fs-body:             clamp(0.9375rem, 0.85rem + 0.3vw, 1rem); /* 15 → 16px */
  --fs-small:            clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); /* 12 → 13px */
  --fs-eyebrow:          0.6875rem;                                /* 11px */

  /* Pesos */
  --fw-thin:       100;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* Line-heights */
  --lh-display:    1.05;
  --lh-tight:      1.10;
  --lh-snug:       1.25;
  --lh-normal:     1.55;
  --lh-body:       1.65;

  /* Letter-spacings */
  --ls-display:    -0.02em;
  --ls-tight:      -0.01em;
  --ls-normal:     0;
  --ls-wide:       0.04em;
  --ls-eyebrow:    0.18em;

  /* ========== ESPAÇAMENTO ========== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  128px;
  --sp-10: 192px;

  /* ========== LAYOUT ========== */
  --container-max:    1440px;
  --container-pad-x:  clamp(24px, 5vw, 80px);
  --section-py:       clamp(64px, 9vw, 128px);
  --header-h:         80px;

  /* ========== RAIOS ========== */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ========== SOMBRAS ========== */
  --shadow-xs:  0 1px 2px rgba(51, 51, 51, 0.04);
  --shadow-sm:  0 2px 8px rgba(51, 51, 51, 0.06);
  --shadow-md:  0 8px 24px rgba(51, 51, 51, 0.08);
  --shadow-lg:  0 24px 56px rgba(51, 51, 51, 0.14);

  /* ========== TRANSIÇÕES ========== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;

  /* ========== Z-INDEX ========== */
  --z-base:      1;
  --z-dropdown:  20;
  --z-sticky:    40;
  --z-overlay:   60;
  --z-modal:     80;
  --z-toast:     100;
}

/* ========== ÁREA HOME (consumidor) ========== */
[data-area="home"] {
  --area-accent:        var(--piave-salmao);
  --area-accent-dark:   var(--piave-salmao-dark);
  --area-accent-soft:   var(--piave-salmao-soft);
  --area-cta-bg:        var(--piave-grafite);
  --area-cta-hover:     var(--piave-salmao);
}

/* ========== ÁREA PRO (profissional) ========== */
[data-area="pro"] {
  --area-accent:        var(--piave-verde);
  --area-accent-dark:   var(--piave-verde-dark);
  --area-accent-soft:   var(--piave-verde-soft);
  --area-cta-bg:        var(--piave-grafite);
  --area-cta-hover:     var(--piave-verde);
}

/* ========== ÁREA GLOBAL/INSTITUCIONAL (default) ========== */
:root {
  --area-accent:        var(--piave-verde);
  --area-accent-dark:   var(--piave-verde-dark);
  --area-accent-soft:   var(--piave-verde-soft);
  --area-cta-bg:        var(--piave-grafite);
  --area-cta-hover:     var(--piave-verde);
}

/* ========== ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}