/* ==========================================================================
   variables.css — Design tokens da Tribo Superfoods
   Fonte de verdade para cores, tipografia, espaçamento e transições.
   Nunca usar valores hardcoded nas folhas de estilo — sempre var(--token).
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — Bricolage Grotesque (variable font local)
   Fonte disponível em: ../Bricolage_Grotesque/
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../Bricolage_Grotesque/BricolageGrotesque-VariableFont_opsz,wdth,wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens globais
   -------------------------------------------------------------------------- */

:root {

  /* --- Cores primárias --- */
  --color-primary:       #8D1A66;
  --color-primary-dark:  #5C1044;
  --color-primary-light: #F3E8EF;
  --color-secondary:     #FBD0B1;

  /* --- Neutros --- */
  --color-black:       #111111;
  --color-white:       #FFFFFF;
  --color-surface:     #F7F3F1;
  --color-border:      #E8E0DC;
  --color-text-muted:  #444444;
  --color-text-hint:   #888888;

  /* --- Tipografia --- */
  --font-primary: 'Bricolage Grotesque', sans-serif;

  --font-size-display: clamp(40px, 6vw, 72px);
  --font-size-h1:      clamp(32px, 4.5vw, 56px);
  --font-size-h2:      clamp(24px, 3vw, 40px);
  --font-size-h3:      clamp(20px, 2vw, 28px);
  --font-size-lead:    clamp(16px, 1.5vw, 20px);
  --font-size-body:    16px;
  --font-size-small:   14px;
  --font-size-label:   11px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
   --font-weight-extrabold: 800;

  --line-height-tight:  1.2;
  --line-height-base:   1.65;

  /* --- Espaçamento (base 4px) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Layout --- */
  --container-max:     1200px;
  --container-padding: clamp(24px, 5vw, 48px);
  --section-padding:   clamp(64px, 8vw, 120px);

  /* --- Bordas e raios --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* --- Transições --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* --- Z-index --- */
  --z-nav:     100;
  --z-modal:   200;
  --z-overlay: 300;

}