/* =============================================================
   NUTRIPLAN TRANSITION THEME — DESIGN TOKENS
   Fonte soberana de cores: Nutriplan Cores (2026).pdf
   Tipografia: Tomato Grotesk (OTF convertido via @font-face)
   ============================================================= */

/* ——————————————————————————————————————————
   FONTES — Tomato Grotesk (OTF local em assets/fonts/)
   —————————————————————————————————————————— */
/* ExtraLight (100, 200, 300) */
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-ExtraLight.otf') format('opentype');
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-ExtraLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Bold / Regular / Medium / SemiBold (400, 500, 600, 700) */
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-Bold.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-Bold.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-Bold.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Slanted (400, 500, 600, 700 italic) */
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-BoldSlanted.otf') format('opentype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-BoldSlanted.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-BoldSlanted.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-BoldSlanted.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-BoldSlanted.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-ExtraBoldSlanted.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black (900) */
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('../assets/fonts/TomatoGrotesk-BlackSlanted.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ——————————————————————————————————————————
   VARIÁVEIS — PALETA NUTRIPLAN 2026
   Valores extraídos do SVG do logotipo (#4f352a)
   e das imagens de referência aprovadas.
   ATUALIZAR com os hexadecimais exatos do PDF
   "Nutriplan Cores (2026).pdf" após extração.
   —————————————————————————————————————————— */
:root {
  /* ——— PALETA PRINCIPAL (extraída das imagens de referência 79/81/83) ——— */

  /* Verde Nutriplan — fundo hero e cards de destaque */
  --color-verde:        #c8e63c; /* Verde limão saturado — hero bg (ref 79) */
  --color-verde-soft:   #b8d44a; /* Verde suave — cards ESG (ref 83) */
  --color-verde-pale:   #e8f5b0; /* Verde pálido — hover states */
  --color-verde-dark:   #8ca02a; /* Verde escuro — texto sobre verde claro */

  /* Marrom Terra — texto, logo, elementos tipográficos */
  --color-terra:        #3d2415; /* Marrom profundo — texto headline e logo */
  --color-terra-btn:    #4a2417; /* Marrom avermelhado — fundo botão CTA */
  --color-terra-light:  #6b4030; /* Marrom médio — hover do botão */
  --color-terra-muted:  #8a6a5e; /* Marrom desbotado — texto secundário */

  /* Off-white — fundo das seções de produto */
  --color-off-white:    #f5ede0; /* Creme quente — fundo seções (ref 81) */
  --color-bege:         #ede8d8; /* Bege — cards inativos/tabs (ref 81) */
  --color-bege-light:   #faf6f0; /* Bege clarissimo — fundos alternados */

  /* Neutros */
  --color-white:        #ffffff;
  --color-black:        #1a1208;
  --color-gray-100:     #f9f6f0;
  --color-gray-200:     #ede8df;
  --color-gray-300:     #d4cfc6;
  --color-gray-400:     #a09990;
  --color-gray-500:     #706963;

  /* Semânticas */
  --color-bg-primary:   var(--color-off-white);
  --color-bg-dark:      var(--color-terra);
  --color-bg-accent:    var(--color-verde);
  --color-text-primary: var(--color-terra);
  --color-text-on-dark: var(--color-off-white);
  --color-text-muted:   var(--color-terra-muted);
  --color-border:       var(--color-gray-300);
  --color-focus:        var(--color-verde);

  /* ——————————————————————————————————————————
     TIPOGRAFIA
     —————————————————————————————————————————— */
  --font-primary: 'Tomato Grotesk', 'DM Sans', system-ui, sans-serif;
  --font-fallback: 'DM Sans', system-ui, sans-serif;

  /* Escala de tamanhos — mobile-first, cresce com clamp() */
  --text-xs:    clamp(0.75rem,  1.5vw, 0.875rem);  /* 12–14px */
  --text-sm:    clamp(0.875rem, 1.8vw, 1rem);       /* 14–16px */
  --text-base:  clamp(1rem,     2vw,   1.125rem);   /* 16–18px */
  --text-lg:    clamp(1.125rem, 2.2vw, 1.25rem);    /* 18–20px */
  --text-xl:    clamp(1.25rem,  2.5vw, 1.5rem);     /* 20–24px */
  --text-2xl:   clamp(1.5rem,   3vw,   2rem);       /* 24–32px */
  --text-3xl:   clamp(2rem,     4vw,   2.75rem);    /* 32–44px */
  --text-4xl:   clamp(2.5rem,   5vw,   3.5rem);     /* 40–56px */
  --text-5xl:   clamp(3rem,     6.5vw, 5rem);       /* 48–80px */
  --text-hero:  clamp(3.5rem,   8vw,   6.5rem);     /* 56–104px */

  /* Pesos */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* ——————————————————————————————————————————
     ESPAÇAMENTO — escala 4px base
     —————————————————————————————————————————— */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* Seções — espaçamento vertical responsivo */
  --section-py:    clamp(4rem, 8vw, 8rem);
  --section-py-sm: clamp(2rem, 5vw, 4rem);

  /* ——————————————————————————————————————————
     LAYOUT
     —————————————————————————————————————————— */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-px: clamp(1rem, 5vw, 3rem);

  /* Grid */
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2.5vw, 1.5rem);

  /* ——————————————————————————————————————————
     BORDAS E RAIOS
     —————————————————————————————————————————— */
  --radius-sm:   0.25rem;   /*  4px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-2xl:  2rem;      /* 32px */
  --radius-full: 9999px;    /* pílula */

  /* ——————————————————————————————————————————
     SOMBRAS
     —————————————————————————————————————————— */
  --shadow-sm:  0 1px 3px rgba(79, 53, 42, 0.08), 0 1px 2px rgba(79, 53, 42, 0.06);
  --shadow-md:  0 4px 16px rgba(79, 53, 42, 0.10), 0 2px 6px rgba(79, 53, 42, 0.08);
  --shadow-lg:  0 12px 40px rgba(79, 53, 42, 0.14), 0 4px 12px rgba(79, 53, 42, 0.08);

  /* ——————————————————————————————————————————
     TRANSIÇÕES
     —————————————————————————————————————————— */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ——————————————————————————————————————————
     Z-INDEX
     —————————————————————————————————————————— */
  --z-below:    -1;
  --z-base:      0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-header:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}