/* ============================================================
   DOPAMINA | GASTROBAR — DESIGN TOKENS
   Fonte da verdade visual. Importe este arquivo antes de qualquer outro.
   Cores extraídas do avatar oficial do @dopaminagastrobar.
   ============================================================ */

:root {
  /* ---------- MARCA: AMARELO (primária) ---------- */
  --dp-amarelo-100: #FEF6C8;
  --dp-amarelo-200: #FDE047;
  --dp-amarelo-300: #F9CD11;  /* ◀ COR OFICIAL DA MARCA (extraída do logo) */
  --dp-amarelo-400: #EAB308;
  --dp-amarelo-500: #B88A06;

  /* ---------- MARCA: ROXO (superfícies) ---------- */
  --dp-roxo-900: #1B1220;     /* mais escuro que o logo — para fundos amplos */
  --dp-roxo-800: #291C30;     /* ◀ ROXO NOITE — cor base do avatar */
  --dp-roxo-700: #34203F;
  --dp-roxo-600: #3B1B4D;     /* ◀ ROXO UVA — meio do gradiente */
  --dp-roxo-500: #4A1A66;     /* ◀ ROXO NEON — ponto de luz do gradiente */
  --dp-roxo-400: #6B2A8F;
  --dp-roxo-300: #8B4FB0;

  /* ---------- NEUTROS ---------- */
  --dp-branco:     #FFFFFF;
  --dp-nevoa:      #F6F1F9;   /* texto principal sobre roxo */
  --dp-lavanda:    #C9B6D6;   /* texto secundário */
  --dp-fumaca:     #8C7A99;   /* texto terciário / legendas */

  /* ---------- FUNCIONAIS (uso restrito a estado, nunca decoração) ---------- */
  --dp-ok:      #4ADE80;      /* disponível / confirmado */
  --dp-alerta:  #FB923C;      /* últimas unidades */
  --dp-erro:    #FB7185;      /* esgotado */

  /* ---------- PAPÉIS SEMÂNTICOS ---------- */
  --dp-fundo:            var(--dp-roxo-900);
  --dp-superficie:       #241732;
  --dp-superficie-alta:  #2E1D3E;
  --dp-borda:            rgba(249, 205, 17, .14);
  --dp-borda-forte:      rgba(249, 205, 17, .38);
  --dp-texto:            var(--dp-nevoa);
  --dp-texto-suave:      var(--dp-lavanda);
  --dp-texto-fraco:      var(--dp-fumaca);
  --dp-destaque:         var(--dp-amarelo-300);
  --dp-sobre-destaque:   var(--dp-roxo-900);   /* texto sobre amarelo */

  /* ---------- GRADIENTES ASSINATURA ---------- */
  --dp-grad-avatar: radial-gradient(120% 120% at 12% 95%, #4A1A66 0%, #3B1B4D 42%, #291C30 100%);
  --dp-grad-noite:  linear-gradient(165deg, #34203F 0%, #291C30 45%, #1B1220 100%);
  --dp-grad-ouro:   linear-gradient(135deg, #FDE047 0%, #F9CD11 48%, #EAB308 100%);
  --dp-grad-brilho: linear-gradient(90deg, transparent, rgba(249,205,17,.85), transparent);

  /* ---------- TIPOGRAFIA ---------- */
  --dp-fonte-display: "Anton", "Archivo Black", "Impact", "Haettenschweiler", sans-serif;
  --dp-fonte-texto:   "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dp-fonte-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Escala tipografica fluida (clamp: min / preferido / max).
     Os pisos de 2xl e 3xl sao baixos de proposito: a Anton e condensada, mas
     'UNIVERSITARIOS' e 'A NOITE E LONGA' em caixa alta estouram 360px de tela
     se o piso subir. Titulo que vaza empurra o layout inteiro para o lado. */
  --dp-t-xs:   clamp(.69rem, .66rem + .14vw, .78rem);
  --dp-t-sm:   clamp(.81rem, .78rem + .16vw, .92rem);
  --dp-t-base: clamp(.95rem, .91rem + .2vw,  1.06rem);
  --dp-t-md:   clamp(1.1rem, 1.03rem + .34vw, 1.3rem);
  --dp-t-lg:   clamp(1.35rem, 1.2rem + .7vw,  1.85rem);
  --dp-t-xl:   clamp(1.8rem, 1.45rem + 1.6vw, 2.9rem);
  --dp-t-2xl:  clamp(2rem, 1.3rem + 3.6vw,   5rem);
  --dp-t-3xl:  clamp(2.6rem, 1.1rem + 7.2vw, 8.5rem);

  --dp-tracking-display: -.02em;
  --dp-tracking-caps:    .18em;   /* para rótulos em CAIXA ALTA */
  --dp-leading-tight:    .92;
  --dp-leading-normal:   1.6;

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --dp-e-1: .25rem;  --dp-e-2: .5rem;   --dp-e-3: .75rem;  --dp-e-4: 1rem;
  --dp-e-5: 1.5rem;  --dp-e-6: 2rem;    --dp-e-7: 3rem;    --dp-e-8: 4rem;
  --dp-e-9: 6rem;    --dp-e-10: 8rem;

  /* ---------- RAIOS ---------- */
  --dp-r-sm: 8px;  --dp-r-md: 14px;  --dp-r-lg: 22px;
  --dp-r-xl: 32px; --dp-r-pill: 999px;

  /* ---------- SOMBRAS E BRILHOS ---------- */
  --dp-sombra-sm:   0 2px 8px rgba(10, 4, 16, .4);
  --dp-sombra-md:   0 12px 34px rgba(10, 4, 16, .55);
  --dp-sombra-lg:   0 30px 70px rgba(10, 4, 16, .68);
  --dp-brilho-ouro: 0 0 0 1px rgba(249,205,17,.35), 0 8px 34px rgba(249,205,17,.28);
  --dp-brilho-neon: 0 0 22px rgba(139,79,176,.55);

  /* ---------- MOVIMENTO ---------- */
  --dp-vel-rapida:  .18s;
  --dp-vel-media:   .38s;
  --dp-vel-lenta:   .75s;
  --dp-ease-saida:  cubic-bezier(.22, 1, .36, 1);      /* desaceleração premium */
  --dp-ease-suave:  cubic-bezier(.65, .05, .36, 1);
  --dp-ease-elast:  cubic-bezier(.34, 1.56, .64, 1);   /* leve overshoot */

  /* ---------- LAYOUT ---------- */
  /* Margem lateral das paginas. O piso de 1.25rem e o respiro minimo no celular;
     acima de ~62rem de largura ela para de crescer em 2.5rem. */
  --dp-margem-lateral: clamp(1.25rem, 4vw, 2.5rem);
  --dp-largura-max: 1240px;
  --dp-largura-texto: 62ch;
  --dp-cabecalho-h: 72px;
}

/* O atributo hidden vale mais que qualquer display do CSS.
   Sem esta regra, todo elemento com display explícito (flex, grid, block)
   continua visível quando o JavaScript marca hidden — o spinner do voucher
   ficava por cima do voucher carregado por causa disso. */
[hidden] { display: none !important; }

/* Respeito à preferência de menos movimento — obrigatório em todos os produtos */
@media (prefers-reduced-motion: reduce) {
  :root { --dp-vel-rapida: .01ms; --dp-vel-media: .01ms; --dp-vel-lenta: .01ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}