:root {
  /* ── Primitivos ── */
  --cor-preto:     #0A0A0A;
  --cor-branco:    #FFFFFF;
  --cor-cinza-900: #1A1A1A;
  --cor-cinza-700: #3D3D3D;
  --cor-cinza-500: #717171;
  --cor-cinza-300: #B8B8B8;
  --cor-cinza-100: #E2E0DB;
  --cor-cinza-050: #F7F6F3;
  --cor-vermelho:  #E8001D;
  --cor-verm-esc:  #C0001A;
  /* Verde Mercado Livre — CTA principal (decisao 2026-04-25) */
  --cor-verde:     #009929;
  --cor-verde-esc: #007A1F;
  /* Azul Mercado Livre — CTA secundario (botoes "Comprar", "Ir pro carrinho", paginacao hover) */
  --cor-azul:      #3483FA;
  --cor-azul-esc:  #2968D4;
  --cor-azul-soft: rgba(52, 131, 250, 0.08);  /* hover discreto em paginacao */
  /* Cinza claro — botoes secundarios (filtros, ordenacao) */
  --cor-cinza-btn: #F5F5F5;
  --cor-cinza-btn-border: #E0E0E0;

  /* ── Cores auxiliares — gateways, badges trust, estados informativos ──
     Promovidas em 2026-05-18 pra suportar checkout v2 + thank-you v2 sem
     hex literais espalhados pelo CSS. */
  --cor-pagbank:   #F4811F;   /* laranja oficial PagBank — badges trust */
  --cor-lgpd:      #1E40AF;   /* azul institucional LGPD — badges trust */
  --cor-info:      #1976D2;   /* azul informativo — mockup-note, status processing */
  --cor-warn:      #F0B400;   /* amarelo — step ativo, alertas leves */
  --cor-whatsapp:     #25D366;
  --cor-whatsapp-esc: #128C7E;

  /* ── Estados semânticos do checkout ── */
  --cor-step-active: var(--cor-warn);
  --cor-step-done:   var(--cor-verde);

  /* ── Semânticos — Backgrounds ── */
  --color-white:      var(--cor-branco);
  --color-black:      var(--cor-preto);
  --color-primary:    var(--cor-verde);
  --color-primary-dark: var(--cor-verde-esc);

  --bg-page:        var(--cor-branco);
  --bg-secondary:   var(--cor-cinza-050);
  --bg-hero:        var(--cor-preto);
  --bg-cta:         var(--cor-verde);
  --bg-cta-hover:   var(--cor-verde-esc);
  --bg-accent:      var(--cor-vermelho);

  /* ── Semânticos — Superfícies (compatibilidade) ── */
  --color-surface:     var(--cor-cinza-050);
  --color-surface-alt: var(--cor-cinza-100);
  --color-card:        var(--cor-cinza-050);

  /* ── Cinzas (compatibilidade) ── */
  --color-gray-100: var(--cor-cinza-100);
  --color-gray-200: var(--cor-cinza-100);
  --color-gray-400: var(--cor-cinza-300);
  --color-gray-600: var(--cor-cinza-500);
  --color-gray-800: var(--cor-cinza-700);
  --color-gray-900: var(--cor-cinza-900);

  /* ── Bordas ── */
  --color-border:       var(--cor-cinza-100);
  --color-border-light: var(--cor-cinza-050);
  --border-default:     var(--cor-cinza-100);
  --border-dark:        var(--cor-preto);
  --border-accent:      var(--cor-vermelho);

  /* ── Semânticos — Texto ── */
  --text-primary:   var(--cor-cinza-900);
  --text-secondary: var(--cor-cinza-500);
  --text-on-dark:   var(--cor-branco);
  --text-accent:    var(--cor-vermelho);

  /* ── Tipografia (Inter unificada — variações apenas de tamanho desde 2026-04-28) ── */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-body);  /* alias — Playfair Display removido */

  /* ── Escala tipográfica (px de referência) ── */
  /* 11px micro / 13px small / 15px body / 20px h3 / 28px h2 / 40px h1 / 56px hero */
  --font-size-xs:  0.6875rem;  /* 11px */
  --font-size-sm:  0.8125rem;  /* 13px */
  --font-size-base: 0.9375rem; /* 15px */
  --font-size-lg:  1.125rem;   /* 18px */
  --font-size-xl:  1.25rem;    /* 20px */
  --font-size-2xl: 1.75rem;    /* 28px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-size-4xl: 3.5rem;     /* 56px */
  --font-size-5xl: 4rem;       /* 64px */

  /* ── Espaçamentos ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem; /* auditoria: faltava na escala → var(--space-7) zerava o padding (ex.: submenu mobile) */
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --container-max:      1440px;
  --container-padding:  2.5rem;  /* desktop: 40px — sangria padrão site (header, footer, home, loja) */
  --header-height-top:   36px;   /* topbar */
  --header-height-main:  80px;   /* faixa 2 (logo+busca+acoes) — medido real 2026-06-19 (era 96, drift) */
  --header-height-nav:   44px;   /* faixa 3 (categorias) — medido real 2026-06-19 (era 52, drift) */
  --header-height-total: 160px;  /* 36+80+44 — CORRIGIDO 2026-06-19: header real mede 160px (token tinha 184, drift de +24px que virava espaço branco abaixo do menu em todas as páginas) */

  /* ── Border-radius — 0 em todos os componentes (padrão premium/arquitetônico) ── */
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-full: 0px;

  /* Exceções controladas — cards e inputs de checkout/thank-you (mockup v2 aprovado 2026-05-17).
     Filosofia premium=0 preservada em loja/home/produto. Checkout adota cards levemente
     arredondados pra clareza visual em densidade alta de formulário. */
  --radius-card:  8px;   /* .ark-co-sec, .confirm-card, .payment-info-box */
  --radius-input: 5px;   /* inputs, selects, botões de ação */
  --radius-pill:  999px; /* status pills do thank-you */

  /* ── Sombras ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);

  /* ── Transições ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index ── */
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-modal: 300;
}

/* Sangria responsiva — token --container-padding adapta por viewport
   Desktop: 40px (premium feeling) | Tablet: 24px | Mobile: 16px (preserva espaço útil) */
@media (max-width: 1023px) {
  :root { --container-padding: 1.5rem; /* 24px tablet */ }
}
@media (max-width: 640px) {
  :root { --container-padding: 1rem;   /* 16px mobile */ }
}