/* =============================================================================
   Mel — tokens.css
   Design tokens (variáveis globais). Fonte única da verdade visual do app.
   Tudo mobile-first. Nenhum componente deve inventar cor/espaçamento fora daqui.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Cores — paleta mel/âmbar
     --------------------------------------------------------------------------- */
  --color-primary:        #C8813A; /* mel escuro — ações principais */
  --color-primary-dark:   #A5662A; /* estado :active / hover */
  --color-primary-light:  #F5C97A; /* mel claro — destaques suaves */
  --color-primary-soft:   #FBEAD0; /* fundo de badge/realce bem claro */

  --color-bg:             #FFFAF4; /* creme — fundo do app */
  --color-surface:        #FFFFFF; /* cards e superfícies elevadas */
  --color-surface-alt:    #FFF6EA; /* superfície alternativa (listas zebra) */

  --color-text:           #2D1F0E; /* marrom escuro — texto principal */
  --color-text-muted:     #8C6A4A; /* texto secundário */
  --color-text-inverse:   #FFFFFF; /* texto sobre cor primária */

  --color-border:         #EEE1CE; /* bordas suaves */
  --color-border-strong:  #E0CBAE; /* bordas de inputs em foco */

  --color-danger:         #D94F3D; /* erro / exclusão */
  --color-danger-soft:    #FBE3DF;
  --color-success:        #4A9B6F; /* sucesso / confirmação */
  --color-success-soft:   #E2F1E9;
  --color-warning:        #E0A11B; /* alerta */
  --color-warning-soft:   #FBEFD2;
  --color-info:           #3D7FD9; /* informação */
  --color-info-soft:      #E1EBFA;

  /* Overlay de modais/drawers */
  --color-overlay:        rgba(45, 31, 14, 0.45);

  /* ---------------------------------------------------------------------------
     Tipografia
     --------------------------------------------------------------------------- */
  --font-family-base: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Helvetica, Arial, sans-serif;

  --font-size-xs:   0.75rem;  /* 12px */
  --font-size-sm:   0.875rem; /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md:   1.125rem; /* 18px */
  --font-size-lg:   1.375rem; /* 22px */
  --font-size-xl:   1.75rem;  /* 28px */
  --font-size-2xl:  2.25rem;  /* 36px */

  --font-weight-regular:  400;
  --font-weight-medium:   600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --line-height-tight:  1.2;
  --line-height-base:   1.5;
  --line-height-loose:  1.7;

  /* ---------------------------------------------------------------------------
     Espaçamentos — escala base 4px
     --------------------------------------------------------------------------- */
  --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 */

  /* ---------------------------------------------------------------------------
     Border radius — generoso, nada industrial
     --------------------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     Sombras — suaves, quentes
     --------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(45, 31, 14, 0.06);
  --shadow-sm: 0 2px 6px rgba(45, 31, 14, 0.08);
  --shadow-md: 0 6px 16px rgba(45, 31, 14, 0.10);
  --shadow-lg: 0 12px 28px rgba(45, 31, 14, 0.14);

  /* ---------------------------------------------------------------------------
     Alturas / tamanhos padrão
     --------------------------------------------------------------------------- */
  --touch-target:    44px;  /* mínimo clicável — acessibilidade */
  --control-height:  48px;  /* inputs e botões */
  --header-height:   56px;
  --bottomnav-height: 64px;
  --content-max-width: 480px; /* largura máxima do conteúdo em telas grandes */

  /* ---------------------------------------------------------------------------
     Z-index — camadas
     --------------------------------------------------------------------------- */
  --z-base:      0;
  --z-header:    100;
  --z-bottomnav: 100;
  --z-overlay:   200;
  --z-modal:     210;
  --z-toast:     300;

  /* ---------------------------------------------------------------------------
     Transições
     --------------------------------------------------------------------------- */
  --transition-fast:  120ms ease;
  --transition-base:  200ms ease;
  --transition-slow:  320ms ease;

  /* Área segura para dispositivos com notch (iOS) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}