/* =========================================================
   Vanilla Brasil — Design Tokens
   Brand book: Estúdio Duna, abril/2020
   Fonte: Galano Grotesque (Rene Bieder / MyFonts)
   ========================================================= */

/* ---------- Fonte oficial ---------- */
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Galano Grotesque';
  src: url('./font/GalanoGrotesque-Heavy.ttf') format('truetype');
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* --- Paleta oficial Pantone (brand book Duna, p.36) --- */
  --vb-green-bright:    #83BD65; /* Pantone 360 C  — acento, palavra-destaque */
  --vb-green-medium:    #5E8B50; /* Pantone 7739 C — símbolo, gráficos */
  --vb-green-dark:      #38583F; /* Pantone 7734 C — PRIMÁRIA, backgrounds hero */
  --vb-olive:           #615C4B; /* Pantone 2329 C — fundo "sobre sombra", elegância sóbria */
  --vb-champagne:       #AEA897; /* Pantone 7535 C — NEUTRA principal, logotipo */
  --vb-sand:            #D6D1BF; /* Pantone 7527 C — backgrounds claros, respiro */
  --vb-cream:           #FAF8F2; /* Branco quebrado — base sobre luz, flor sobre sombra */

  /* --- Semânticos sugeridos --- */
  --color-bg:           var(--vb-cream);
  --color-bg-dark:      var(--vb-green-dark);
  --color-bg-alt:       var(--vb-sand);
  --color-bg-muted:     var(--vb-olive);

  --color-text:         var(--vb-green-dark);
  --color-text-muted:   var(--vb-champagne);
  --color-text-inverse: var(--vb-cream);

  --color-accent:       var(--vb-green-bright);
  --color-accent-hover: var(--vb-green-medium);

  --color-border:       var(--vb-sand);
  --color-border-dark:  var(--vb-champagne);

  /* --- Tipografia --- */
  --font-brand: 'Galano Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-extralight: 200;
  --fw-light:      300;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;
  --fw-heavy:      950;

  /* Escala (modular ratio ~1.25) — mobile-first; em telas grandes escalar com clamp() */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  2rem;      /* 32 */
  --fs-3xl:  2.5rem;    /* 40 */
  --fs-4xl:  3.5rem;    /* 56 */
  --fs-5xl:  clamp(3rem, 6vw + 1rem, 5.5rem); /* hero */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;

  /* --- Espaçamento (8pt grid) --- */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  3rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --space-8:  8rem;

  /* --- Raios e camadas --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(56, 88, 63, 0.08);
  --shadow-md: 0 4px 12px rgba(56, 88, 63, 0.12);
  --shadow-lg: 0 12px 32px rgba(56, 88, 63, 0.18);

  /* --- Container --- */
  --container-max: 1200px;
}

/* ---------- Base resets úteis ---------- */
body {
  font-family: var(--font-brand);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}