/* ============================================================
   PIAVE COSMETICS — DESIGN TOKENS
   Fonte da verdade: Brandbook PIAVE oficial (17 págs)
   Cores digitais pág. 13 · Tipografia pág. 5
   NÃO usar dourado, verde escuro ou Cormorant. Só o que está aqui.
   ============================================================ */

/* ---------- Fontes ----------
   Work Sans: fonte de trabalho oficial (variable, self-hosted)
   Alata: fonte do logotipo "COSMETICS" — usada em títulos
   (Alata via Google Fonts por ora; self-hospedar antes do go-live) */

@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 OFICIAIS (brandbook pág. 13) ===== */
  --piave-verde:   #B4D6B9; /* pistache · assinatura · R180 G214 B185 */
  --piave-salmao:  #F79883; /* elegância · destaque · R247 G152 B131 */
  --piave-grafite: #333333; /* texto · sofisticação */
  --piave-branco:  #FFFFFF;

  /* ===== ESCALAS TONAIS (tints do brandbook + extrapolação) ===== */
  /* Verde pistache */
  --piave-verde-900: #6FA277;
  --piave-verde-700: #8FBF98;
  --piave-verde-500: #B4D6B9; /* base */
  --piave-verde-300: #D0E5D3;
  --piave-verde-100: #ECF5ED;
  --piave-verde-050: #F6FAF7;

  /* Salmão */
  --piave-salmao-900: #E86B50;
  --piave-salmao-700: #F4825F;
  --piave-salmao-500: #F79883; /* base */
  --piave-salmao-300: #FBC1B3;
  --piave-salmao-100: #FDE4DD;
  --piave-salmao-050: #FEF3F0;

  /* Grafite / neutros (Cool Gray 11C ref) */
  --piave-grafite-900: #1A1A1A;
  --piave-grafite-700: #333333; /* base texto */
  --piave-grafite-500: #5C5C5C;
  --piave-grafite-300: #999999;
  --piave-grafite-200: #C7C7C7;
  --piave-grafite-100: #E6E6E6;
  --piave-grafite-050: #F4F4F4;

  /* ===== CORES POR LINHA (Paleta de Cores Produtos oficial) =====
     principal (forte) · bg (tint claro p/ card) · ink (texto sobre claro) */
  --line-hydra:     #547E94; --line-hydra-bg: #D8E8EF; --line-hydra-ink: #3C5A6B; /* azul */
  --line-bond:      #7C4445; --line-bond-bg:  #F0D6D5; --line-bond-ink:  #7C4445; /* vinho */
  --line-fortify:   #B24A39; --line-fortify-bg: #F9D6CE; --line-fortify-ink: #B24A39; /* coral */
  --line-smooth:    #406150; --line-smooth-bg: #D5E2DB; --line-smooth-ink: #406150; /* verde escuro */
  --line-styling:   #8E8897; --line-styling-bg: #ECE9EF; --line-styling-ink: #6E6878; /* lilás */
  --line-highlights:#5E97B8; --line-highlights-bg: #DCEAF2; --line-highlights-ink: #3F7290; /* azul céu */
  --line-home:      #C2C2C2; --line-home-bg: #EDEDED; --line-home-ink: #5C5C5C; /* neutro (oficial PDF) */

  /* ===== PAPÉIS SEMÂNTICOS ===== */
  --color-bg:            var(--piave-branco);
  --color-bg-alt:        var(--piave-verde-050);
  --color-surface:       var(--piave-branco);
  --color-text:          var(--piave-grafite-700);
  --color-text-soft:     var(--piave-grafite-500);
  --color-text-invert:   var(--piave-branco);
  --color-brand:         var(--piave-verde-500);
  --color-accent:        var(--piave-salmao-500);
  --color-line:          var(--piave-grafite-100);

  /* ===== TIPOGRAFIA ===== */
  --font-display: "Alata", "Work Sans", system-ui, sans-serif; /* títulos */
  --font-body:    "Work Sans", system-ui, -apple-system, sans-serif;

  --fs-display:  clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:       clamp(2rem, 4.5vw, 3.25rem);
  --fs-h2:       clamp(1.6rem, 3.2vw, 2.25rem);
  --fs-h3:       clamp(1.25rem, 2vw, 1.5rem);
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-eyebrow:  0.75rem;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --ls-eyebrow: 0.22em; /* tracking largo, estilo brandbook "C O S M E T I C S" */
  --ls-display: 0.01em;

  /* ===== ESPAÇAMENTO (escala 4px) ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ===== RAIO / SOMBRA / LAYOUT ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(51,51,51,0.06), 0 2px 8px rgba(51,51,51,0.05);
  --shadow-md: 0 4px 16px rgba(51,51,51,0.08), 0 12px 32px rgba(51,51,51,0.06);

  --container: 1200px;
  --container-narrow: 760px;

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}