/* ============================================================================
   dash-shark — TOKENS
   Sistema de dashboard da Shark Pro Trade. Camada de fundação.
   ----------------------------------------------------------------------------
   Carregue este arquivo ANTES de dash-shark.css.

   Por que tudo tem prefixo --ds- e valor literal (e nao var(--blue)):
   o site (site.css) e o painel antigo (painel.css) definem tokens de mesmo
   nome com valores diferentes — --green e #00ff5f num e #10b981 no outro.
   Se o dash-shark herdasse por var(), aplicar ele numa pagina do painel
   trocaria o verde da marca por esmeralda sem ninguem perceber. Valor literal
   = o sistema se comporta igual em qualquer pagina.

   Para reskinar: sobrescreva os tokens da secao MARCA num :root depois deste
   arquivo. Nao precisa tocar em mais nada.
   ========================================================================= */

:root {
  /* --- MARCA: a superficie de override -----------------------------------
     Herdado de website/assets/css/site.css (sistema oficial, black/blue/green).
     A semantica de cor e' VETO da marca:
       azul  = tecnologia    (kickers, dados neutros, estado informativo)
       verde = conversao/lucro APENAS
       vermelho = perda/erro APENAS  — nunca decorativo
       menta = energia, destaque, novidade — e o estado de ATENCAO
               (era o rosa; ver a secao ATENCAO abaixo)
     Nao use verde pra "ok generico" nem vermelho pra "destaque".

     NAO EXISTE amarelo/dourado/ambar neste sistema, e a ausencia e'
     deliberada: dourado foi a v1 que o cliente reprovou, e amarelo nao
     pertence a marca. O papel que amarelo cumpre em outros design systems
     (aviso, "quase la", benchmark) e' do ROSA aqui. Se voce sentir falta de
     um ambar, use --ds-atencao. */
  --ds-black:      #000000;
  --ds-graphite:   #0b0c0d;
  --ds-graphite-2: #101113;
  --ds-graphite-3: #16181a;
  --ds-white:      #fefefe;

  --ds-blue:       #007aff;
  --ds-green:      #00ff5f;
  --ds-mint:       #29f3c1;
  --ds-red:        #fd0000;
  /* ATENCAO — era ROSA (#e6387e / #a3144e) ate' 12/08/2026, quando o Lucas pediu
     pra tirar o rosa dos paineis. O PAPEL nao pode sair junto: quando o dourado
     foi reprovado, amarelo/ambar sairam da paleta e o rosa herdou o trabalho
     deles (aviso, "quase la", benchmark, atencao). Sem substituto, atencao
     viraria azul — igual ao resto — e a triagem que a cor fazia se perderia.
     Herdou o MENTA, que ja' estava na paleta como serie secundaria neutra e
     nunca significou valor. Verde e vermelho continuam intocados: verde e'
     conversao e lucro, vermelho e' perda e erro, e nenhum dos dois pode ser
     gasto em "olhe aqui".
     A INVERSAO DE TINTA E' O DETALHE QUE MORDE: o rosa precisava do tom PROFUNDO
     com texto branco; a menta e' clara e pede texto ESCURO.
       #a3144e + branco = 7,59:1   (o que o rosa fazia)
       #29f3c1 + branco = 1,42:1   REPROVA
       #29f3c1 + escuro = 12,65:1  passa AAA
     Por isso nao existe --ds-atencao-deep: nao faz falta. Onde a cor fica ATRAS
     de letra, a tinta e' --ds-text-on-accent, o mesmo token que o verde usa. */
  --ds-atencao:      var(--ds-mint);
  --ds-atencao-tinta: var(--ds-text-on-accent);

  /* --- SUPERFICIES -------------------------------------------------------
     canvas = fundo da pagina (preto puro, regra da marca: nunca cinza-escuro)
     surface = card; raised = card sobre card; sunken = input, poco */
  --ds-canvas:        var(--ds-black);
  --ds-surface:       var(--ds-graphite);
  --ds-surface-2:     var(--ds-graphite-2);
  --ds-surface-raised: var(--ds-graphite-3);
  --ds-sunken:        #060707;
  --ds-glass:         rgba(11, 12, 13, 0.6);
  --ds-glass-strong:  rgba(11, 12, 13, 0.86);

  /* --- TEXTO ------------------------------------------------------------- */
  --ds-text-1: var(--ds-white);
  --ds-text-2: rgba(254, 254, 254, 0.64);
  --ds-text-3: rgba(254, 254, 254, 0.38);
  --ds-text-4: rgba(254, 254, 254, 0.22);
  --ds-text-on-accent: #001b0a;

  /* --- LINHAS ------------------------------------------------------------ */
  --ds-line:        rgba(254, 254, 254, 0.08);
  --ds-line-strong: rgba(254, 254, 254, 0.14);
  --ds-line-faint:  rgba(254, 254, 254, 0.045);

  /* --- GLOW --------------------------------------------------------------
     site.css, marketing.php e checkout-success.php tinham 3 valores
     diferentes pra --glow-green (0.2 / 0.15 / 0.1). Canonizado aqui no 0.2
     do site.css, que e' a fonte oficial. */
  --ds-glow-blue:  rgba(0, 122, 255, 0.25);
  --ds-glow-green: rgba(0, 255, 95, 0.2);
  --ds-glow-red:   rgba(253, 0, 0, 0.18);
  --ds-glow-atencao: rgba(41, 243, 193, 0.30);

  /* --- TIPOGRAFIA --------------------------------------------------------
     --ds-display e' proxy de Vastago Grotesk (licenciada, arquivo nunca
     entregue). Se a licenca aparecer, troque SO esta linha e o <link>. */
  --ds-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --ds-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --ds-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ds-fs-micro: 9.5px;   /* label mono uppercase */
  --ds-fs-xs:    11px;
  --ds-fs-sm:    12.5px;
  --ds-fs-base:  14px;
  --ds-fs-md:    15px;
  --ds-fs-lg:    17px;
  --ds-fs-xl:    20px;
  --ds-fs-2xl:   26px;
  --ds-fs-3xl:   34px;
  --ds-fs-hero:  clamp(38px, 4.4vw, 58px);   /* numero heroi de card */

  --ds-lh-tight: 1.06;
  --ds-lh-snug:  1.3;
  --ds-lh-base:  1.6;

  --ds-track-tight: -0.02em;
  --ds-track-hero:  -0.035em;
  --ds-track-label: 0.16em;   /* micro-label uppercase */
  --ds-track-wide:  0.32em;   /* kicker */

  /* --- ESPACO ------------------------------------------------------------ */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;
  --ds-space-9: 56px;
  --ds-space-10: 72px;

  /* --- RAIO --------------------------------------------------------------
     O squircle generoso (18-24px) e' o que separa o dash-shark do painel
     antigo, que parava em 10px e parecia bootstrap. */
  --ds-r-xs:   6px;
  --ds-r-sm:   10px;
  --ds-r-md:   14px;
  --ds-r-lg:   18px;
  --ds-r-xl:   24px;
  --ds-r-2xl:  32px;
  --ds-r-pill: 999px;

  /* --- ELEVACAO ----------------------------------------------------------
     A assinatura da casa e' o under-glow de spread NEGATIVO (copy.css:938):
     a luz nao circunda o card, ela vaza por baixo. E' o que da o "premium"
     sem virar drop-shadow de bootstrap. */
  --ds-e1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --ds-e2: 0 8px 24px -12px rgba(0, 0, 0, 0.8);
  --ds-e3: 0 24px 70px -30px rgba(0, 0, 0, 0.9);
  --ds-e4: 0 40px 110px -50px rgba(0, 0, 0, 0.95);
  --ds-underglow-blue:  0 50px 140px -70px rgba(0, 122, 255, 0.45);
  --ds-underglow-green: 0 50px 140px -70px rgba(0, 255, 95, 0.45);
  --ds-ring-blue:  0 0 0 1px rgba(0, 122, 255, 0.3);
  --ds-ring-green: 0 0 0 1px rgba(0, 255, 95, 0.3);

  /* --- DESFOQUE ---------------------------------------------------------- */
  --ds-blur-sm: 8px;
  --ds-blur-md: 12px;
  --ds-blur-lg: 16px;

  /* --- MOVIMENTO ---------------------------------------------------------
     Easing da casa, ja usado literal em 6+ lugares do site.css. */
  --ds-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ds-dur-1: 120ms;
  --ds-dur-2: 220ms;
  --ds-dur-3: 400ms;
  --ds-dur-4: 800ms;

  /* --- CAMADAS ------------------------------------------------------------
     O site usa grain em z-index 9999. Overlay do dash-shark fica abaixo
     disso de proposito, pra textura global continuar por cima. */
  --ds-z-base:    1;
  --ds-z-sticky:  100;
  /* O scrim fica ABAIXO de gaveta E de modal. Ancorar ele em "modal - 1"
     parece natural e esta errado: a gaveta (200) sumiria atras dele (299). */
  --ds-z-scrim:   150;
  --ds-z-drawer:  200;
  --ds-z-modal:   300;
  --ds-z-toast:   400;
  --ds-z-tooltip: 500;

  /* --- TRAMA (dither/halftone) -------------------------------------------
     Textura-como-dado. Ver §"Trama" no README. */
  --ds-mesh-size: 3px;
  --ds-mesh-dot:  rgba(254, 254, 254, 0.18);
}

/* Reduz custo em telas pequenas: o site ja documenta esse orcamento em
   copy.css:1811 (9 animacoes infinitas + backdrop-filters mediram mal em
   mobile). Mantenha 767px em sincronia com o resto do projeto. */
@media (max-width: 767px) {
  :root {
    --ds-blur-sm: 0px;
    --ds-blur-md: 0px;
    --ds-blur-lg: 0px;
    --ds-e3: 0 12px 32px -18px rgba(0, 0, 0, 0.9);
    --ds-e4: 0 16px 40px -22px rgba(0, 0, 0, 0.95);
    --ds-underglow-blue:  0 24px 60px -40px rgba(0, 122, 255, 0.4);
    --ds-underglow-green: 0 24px 60px -40px rgba(0, 255, 95, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-dur-1: 0ms;
    --ds-dur-2: 0ms;
    --ds-dur-3: 0ms;
    --ds-dur-4: 0ms;
  }
}