/* ═══════════════════════════════════════════════════════════════════════════
 * ⚠️  REGRA ANTI-RECIDIVA — TOKENS DEVEM SER hex/rgb/var, NUNCA HSL puro
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Snippets ativos usam direto:  var(--lov-primary)
 *                       NÃO:    hsl(var(--lov-primary))
 *
 * Logo, tokens precisam estar em formato CSS válido como cor:
 *   ✅ --lov-primary: #2E8B57;
 *   ✅ --ni-green:    rgb(46, 139, 87);
 *   ✅ --ni-bg:       var(--ni-white);
 *   ❌ --lov-primary: 147 50% 36%;   ← INVÁLIDO sem hsl() — quebra o CSS silencioso
 *
 * Bug histórico: tokens HSL puros causaram 23 seletores invisíveis na home
 * (botões, cards verdes, bordas). Fix: 06/05/2026.
 * ═══════════════════════════════════════════════════════════════════════════ */

@import url('./ni-components.css');

/*
 * ni-tokens.css — Design System NI v2.1
 * ÚNICA fonte de verdade do visual do site.
 * Para mudar qualquer token: editar APENAS este arquivo.
 *
 * Carregado em priority 0 via CssGlobalModule::tokens_link()
 * E via SeoHelpers::head() para as 960 URLs SEO
 *
 * D1.2 (06/05/2026): 8 blocos :root consolidados em 1 bloco único.
 */

/* ════════════════════════════════════════════════════════════════════════
   TOKENS — bloco único (D1.2)
   ════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── VERDE / MARCA ──────────────────────────────────────────────────── */
  --ni-green:        #2E8B57;   /* Verde institucional base             */
  --ni-bright:       #1DD47E;   /* Verde accent / hover / CTA           */
  --ni-green-hover:  #1DD47E;   /* Alias explícito para hover           */
  --ni-green-light:  #58C98A;   /* Eyebrows, badges, ícones leves       */
  --ni-green-light2: #3DA86D;   /* Verde médio brilhante                */
  --ni-green-dim:    #86efac;   /* Textos em fundo escuro               */
  --ni-green-bg:     #DDF3E6;   /* Fundo chip/badge verde               */
  --ni-green-accent: #DDF3E6;   /* Alias compat                         */
  --ni-cta-hover:    #15B86A;   /* CTA pressed state                    */
  --ni-teal:         #2a8a7a;
  --ni-green-dark:   #123622;
  --ni-green-mid:    #1F8A4C;
  --ni-green-primary:#2E9B5F;
  --ni-green-soft:   #EAF8EF;
  --ni-green-pale:   #C2E8CE;
  --ni-emerald:      #059669;   /* Verde esmeralda                      */

  /* ── ESCUROS ───────────────────────────────────────────────────────── */
  --ni-dark:         #121F17;   /* Fundo escuro principal               */
  --ni-dark-2:       #15231A;   /* Texto escuro / fundo alt dark        */
  --ni-dark-3:       #1A2E21;   /* Bordas em contexto escuro            */
  --ni-dark-4:       #2A3F30;   /* Cards em contexto escuro             */
  --ni-dark-mid:     var(--ni-dark-3);
  --ni-dark-border:  #2A3F30;
  --ni-dark-900:     #0F172A;   /* Azul quase-preto                     */

  /* ── CLAROS / FUNDOS ───────────────────────────────────────────────── */
  --ni-bg:           #F9FAF7;   /* Fundo global do site                 */
  --ni-bg-light:     #F9FAF7;   /* Alias para compat                    */
  --ni-bg-page:      #FAFAF8;
  --ni-bg-warm:      #F8F7F4;   /* Fundo creme off-white                */
  --ni-bg-white:     #FFFFFF;
  --ni-bg-soft:      #EDEEE9;
  --ni-bg-success:   #DDF3E6;
  --ni-bg-warning:   #FDF0E2;
  --ni-bg-error:     #FEE2E2;
  --ni-card:         #FFFFFF;   /* Cards / componentes                  */
  --ni-white:        #FFFFFF;

  /* ── BORDAS ────────────────────────────────────────────────────────── */
  --ni-border:       #E5E7E0;   /* Bordas padrão                        */
  --ni-border-soft:  #D8DED9;   /* Bordas sutis                         */
  --ni-border-light: #E8ECE9;

  /* ── TEXTOS ────────────────────────────────────────────────────────── */
  --ni-text:         #15231A;   /* Texto principal                      */
  --ni-text-on-dark: #D8DED9;   /* Texto em fundo escuro                */
  --ni-muted:        #677367;   /* Texto secundário                     */
  --ni-muted-dark:   #9DB5A2;   /* Muted em fundo escuro                */
  --ni-text-muted:   #677367;   /* Alias para compat                    */
  --ni-text-body:    #1E2D23;
  --ni-text-secondary:#4A5D50;
  --ni-text-light:   #94A398;
  --ni-text-main:    #102018;
  --ni-text-soft:    #DCEBE2;
  --ni-text-placeholder:#A7AEAA;
  --ni-text-muted-dark: #c0d0c0;
  --ni-on-dark:      rgba(255, 255, 255, 0.93);
  --ni-on-dark-muted:rgba(255, 255, 255, 0.72);
  --ni-on-dark-subtle:rgba(255, 255, 255, 0.50);

  /* ── OUTRAS CORES ──────────────────────────────────────────────────── */
  --ni-amber:        #F2993A;   /* Destaque / counters                  */
  --ni-orange:       #F2993A;
  --ni-orange-hover: #D17E2F;
  --ni-orange-light: #FDF0E2;
  --ni-red:          #DC2626;
  --ni-blue-dark:    #1e3a5f;
  --ni-gray-700:     #374151;   /* Cinza texto                          */
  --ni-slate:        #64748b;
  --ni-slate-light:  #F1F5F9;   /* Valor efetivo (duplicata #e2e8f0 removida) */
  --ni-slate-300:    #d1d5db;
  --ni-slate-400:    #94a3b8;
  --ni-slate-700:    #334155;

  /* ── TIPOGRAFIA ────────────────────────────────────────────────────── */
  --font-h:          'Outfit', sans-serif;
  --font-b:          'Space Grotesk', sans-serif;
  --ni-font-heading: var(--font-h);
  --ni-font-body:    var(--font-b);

  /* ── GRADIENTES ────────────────────────────────────────────────────── */
  --ni-strip-gradient:   linear-gradient(90deg, var(--ni-green), var(--ni-bright), var(--ni-green));
  --ni-hero-gradient:    linear-gradient(135deg, #123622 0%, #1F8A4C 100%);
  --ni-dark-gradient:    linear-gradient(135deg, var(--ni-dark) 0%, #0E1A13 100%);
  --ni-cta-gradient:     linear-gradient(135deg, var(--ni-dark), #1A3A2A);
  --ni-gradient-hero:    linear-gradient(135deg, var(--ni-green), #2a8a7a, #E8913A);
  --ni-gradient-card:    linear-gradient(145deg, #FFFFFF, #F4F6F2);
  --ni-gradient-fresh:   linear-gradient(135deg, var(--ni-green), var(--ni-bright));
  --ni-gradient-warm:    linear-gradient(135deg, #F2993A, #D17E2F);

  /* ── SOMBRAS ───────────────────────────────────────────────────────── */
  --ni-shadow-header:     0 1px 4px rgba(21,35,26,.06);
  --ni-shadow-sm:         0 1px 4px rgba(21,35,26,.06);
  --ni-shadow-md:         0 4px 16px rgba(21,35,26,.08);
  --ni-shadow-lg:         0 8px 32px rgba(21,35,26,.12);
  --ni-shadow-card:       0 8px 24px rgba(16,32,24,.04);
  --ni-shadow-card-hover: 0 4px 16px rgba(21,35,26,.1);
  --ni-shadow-hover:      0 12px 32px rgba(16,32,24,.10);
  --ni-shadow:            0 4px 20px -4px rgba(46, 139, 87, 0.12);
  --ni-shadow-warm:       0 4px 20px -4px rgba(232, 145, 58, 0.25);

  /* ── RADIUS ────────────────────────────────────────────────────────── */
  --ni-radius-xs:    4px;
  --ni-radius-sm:    8px;
  --ni-radius-md:    10px;
  --ni-radius-lg:    12px;
  --ni-radius-xl:    16px;
  --ni-radius-2xl:   20px;
  --ni-radius-3xl:   28px;
  --ni-radius-pill:  999px;
  --ni-radius:       12px;
  --ni-radius-full:  9999px;
  --ni-radius-hero:  28px;
  --ni-radius-card:  28px;
  --ni-radius-input: 18px;
  --ni-radius-chip:  999px;

  /* ── LAYOUT / HEADER ───────────────────────────────────────────────── */
  --ni-header-height:        64px;
  --ni-header-logo:          38px;
  --ni-header-logo-inner:    22px;
  --ni-container:            1180px;
  --ni-content-max:          800px;
  --ni-container-mobile:     calc(100% - 48px);
  --ni-container-max:        680px;
  --ni-header-height-mobile: 60px;
  --ni-logo-size-mobile:     34px;
  --ni-logo-inner-mobile:    20px;
  --ni-dropdown-min-width:   220px;
  --ni-mobile-drawer-width:  min(300px, 85vw);
  --ni-cta-height:           36px;

  /* ── ESPAÇAMENTOS ──────────────────────────────────────────────────── */
  --ni-space-xs:   4px;
  --ni-space-sm:   8px;
  --ni-space-md:   16px;
  --ni-space-lg:   24px;
  --ni-space-xl:   32px;
  --ni-space-2xl:  48px;

  /* ── Z-INDEX ───────────────────────────────────────────────────────── */
  --ni-z-header:   9000;  /* era 50 — aumentado para dropdown ficar acima do hero */
  --ni-z-overlay:  99999;
  --ni-z-supreme:  999999;

  /* ── OVERLAYS ──────────────────────────────────────────────────────── */
  --ni-overlay-dark: rgba(0,0,0,.7);

  /* ── ALIASES LOVABLE — hex direto ──────────────────────────────────── */
  /* Snippets usam var(--lov-X) sem hsl() — fix 06/05/2026 */
  --lov-cta:           #1DD47E;
  --lov-cta-fg:        #FFFFFF;
  --lov-primary:       #2E8B57;
  --lov-primary-fg:    #FFFFFF;
  --lov-foreground:    #15231A;
  --lov-muted-fg:      #677367;
  --lov-background:    #F9FAF7;
  --lov-border:        #E5E7E0;
  --lov-card:          #FFFFFF;
  --lov-surface:       #F4F2EE;
  --lov-green:         var(--ni-bright);
  --lov-bg:            var(--ni-bg);
  --lov-dark:          var(--ni-dark);
  --lov-text:          var(--ni-text);
  --lov-muted:         var(--ni-muted);
  --lov-cta-hover:     var(--ni-cta-hover);
  --lov-fg-light:      var(--ni-muted-dark);
  --lov-shadow-md:     var(--ni-shadow-md);
  --lov-shadow-lg:     var(--ni-shadow-lg);
  --lov-shadow-card:   var(--ni-shadow-card);
  --lov-amber-bg:      rgba(242,153,58,.12);
  --lov-amber-text:    #F2993A;
  --lov-primary-deep:  #123622;
  --lov-primary-2:     var(--ni-bright);
  --lov-ra:            8px;
  --lov-bg-dark:       var(--ni-dark);
  --lov-fg:            var(--ni-muted);
  --lov-font-body:     var(--font-b);
  --lov-font-heading:  var(--font-h);
  --lov-font-sans:     var(--font-b);
  --lov-surface-alt:   #F5F4F0;
  --lov-text-muted:    #5A6A60;
  --lov-text-subtle:   #8B978F;
  --lov-shadow-sm:     0 1px 3px rgba(0,0,0,0.04);
  --lov-error:         #C44545;
  --lov-border-alt:    #C9CFC4;
  --lov-dark-deep:     #0B1A12;
  --lov-text-dim:      #5B7064;
  --lov-green-deep:    #2E5942;
  --lov-amber:         #F5A623;
  --lov-bg-warm:       #F8F7F2;

  /* ── ALIASES LEGADO ────────────────────────────────────────────────── */
  --g:   var(--ni-green);
  --g2:  var(--ni-bright);
  --g3:  var(--ni-bright);
  --gb:  var(--ni-green-bg);
  --dk:  var(--ni-dark);
  --dk2: var(--ni-dark-2);
  --gr:  var(--ni-muted);
  --gr2: #F4F6F2;
  --w:   #fff;

}

/* ════════════════════════════════════════════════════════════════════════
   INPUTS — classe base para inputs genéricos de formulário
   ════════════════════════════════════════════════════════════════════════ */

.ni-input-base {
  width: 100%;
  padding: 10px 14px;
  background: var(--ni-card);
  border: 1px solid var(--ni-border-soft);
  border-radius: var(--ni-radius-sm);
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--ni-text);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}

.ni-input-base:focus {
  border-color: var(--ni-green);
  box-shadow: 0 0 0 3px rgba(46,139,87,.1);
  /* AlimentosRenderer — tokens específicos */
  --ni-food-text:          #3a4a3c;                                  /* Texto listas info nutricional */
  --ni-food-border:        #d4e8d8;                                  /* Borda caixa de dica (ni-tip)  */
  --ni-food-divider:       #f0f5f1;                                  /* Separador linhas tabela nutri  */
  --ni-food-hero-gradient: linear-gradient(135deg,#f0faf5,#e8f5ed); /* Gradiente card hero alimento   */
  --ni-radius-food-hero:   14px;                                     /* Radius card hero alimento      */

  /* ReceitasRenderer — tokens de conteúdo e layout */
  --ni-recipe-text:         #3a3a3a;   /* Texto corpo seções de conteúdo */
  --ni-recipe-text-muted:   #5a5a5a;   /* Texto FAQ expandido             */
  --ni-recipe-amber:        #E8913A;   /* Âmbar tag sem açúcar + quando   */
  --ni-recipe-divider:      #f0f0f0;   /* Separador listas ing/steps/FAQ  */
  --ni-recipe-divider-mint: #e5fbf0;   /* Separador interno benefícios    */
  --ni-recipe-bg-mint:      #f0fdf4;   /* Fundo mint tip/benefícios/author*/
  --ni-recipe-bg-amber:     #fef3e2;   /* Fundo âmbar quando consumir     */
  --ni-recipe-bg-refs:      #f9fafb;   /* Fundo off-white referências     */
  --ni-recipe-border-mint:  #d1fae5;   /* Borda seções mint               */
  --ni-recipe-border-share: #e2e8f0;   /* Borda share bar                 */
  --ni-recipe-border-refs:  #e5e7eb;   /* Borda referências               */

}