/* ============================================================
   PDV Petitana — design tokens
   Extraídos do CSS de pdv.nuvemshop.com.br (Nimbus DS) em 26/08/2026.
   Valores idênticos ao original; prefixo trocado de --nimbus- para --ds-.

   Carregue ANTES de qualquer outro CSS.
   Regra: nenhum valor literal em regra de componente — sempre var(--ds-*).
   ============================================================ */

:root{

  /* ---------- cor · primary (elemento clicável principal) ---------- */
  --ds-primary-surface:#eef5ff;
  --ds-primary-surfaceHighlight:#96c1fc;
  --ds-primary-interactive:#0059d5;
  --ds-primary-interactiveHover:#00429f;
  --ds-primary-interactivePressed:#00347d;
  --ds-primary-textLow:#00255a;
  --ds-primary-textHigh:#000b19;

  /* ---------- cor · success (confirmação, caixa aberto, troco) ---------- */
  --ds-success-surface:#defef2;
  --ds-success-surfaceHighlight:#7af7c7;
  --ds-success-interactive:#00c87b;
  --ds-success-interactiveHover:#00935b;
  --ds-success-interactivePressed:#007447;
  --ds-success-textLow:#005333;
  --ds-success-textHigh:#001910;

  /* ---------- cor · warning (estoque baixo, prazo estourando) ---------- */
  --ds-warning-surface:#fef2de;
  --ds-warning-surfaceHighlight:#f7c77a;
  --ds-warning-interactive:#c87b00;
  --ds-warning-interactiveHover:#935b00;
  --ds-warning-interactivePressed:#744700;
  --ds-warning-textLow:#533300;
  --ds-warning-textHigh:#191000;

  /* ---------- cor · danger (esgotado, apagar — usar com parcimônia) ---------- */
  --ds-danger-surface:#fedede;
  --ds-danger-surfaceHighlight:#f77a7c;
  --ds-danger-interactive:#c80003;
  --ds-danger-interactiveHover:#930002;
  --ds-danger-interactivePressed:#740002;
  --ds-danger-textLow:#530001;
  --ds-danger-textHigh:#190000;

  /* ---------- cor · neutral (90% da interface vive aqui) ---------- */
  --ds-neutral-background:#ffffff;
  --ds-neutral-surface:#f6f6f6;
  --ds-neutral-surfaceDisabled:#e7e7e7;
  --ds-neutral-surfaceHighlight:#d1d1d1;
  --ds-neutral-interactive:#b0b0b0;
  --ds-neutral-interactiveHover:#888888;
  --ds-neutral-interactivePressed:#777777;
  --ds-neutral-textDisabled:#6d6d6d;
  --ds-neutral-textLow:#5d5d5d;
  --ds-neutral-textHigh:#0a0a0a;

  /* ---------- tipografia ---------- */
  --ds-font-sans:Geist,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",arial,sans-serif;
  --ds-font-mono:"Geist Mono","Roboto Mono",monospace;

  --ds-fs-caption:.75rem;    --ds-lh-caption:1rem;      /* contadores, "(0 produtos)" */
  --ds-fs-base:.875rem;      --ds-lh-base:1.25rem;      /* gestão: tabelas, formulários */
  --ds-fs-highlight:1rem;    --ds-lh-highlight:1.5rem;  /* balcão: botões, itens, cards */
  --ds-fs-h1:2rem;           --ds-lh-h1:2.5rem;
  --ds-fs-h2:1.75rem;        --ds-lh-h2:2rem;
  --ds-fs-h3:1.5rem;         --ds-lh-h3:1.75rem;
  --ds-fs-h4:1.25rem;        --ds-lh-h4:1.5rem;
  --ds-fs-h5:1rem;           --ds-lh-h5:1.5rem;
  --ds-fs-h6:.875rem;        --ds-lh-h6:1.25rem;

  --ds-fw-regular:400;
  --ds-fw-medium:500;   /* botões e rótulos */
  --ds-fw-bold:600;     /* títulos e valores monetários — não existe 700 */

  /* ---------- forma ---------- */
  --ds-r-0-5:.125rem;
  --ds-r-1:.25rem;
  --ds-r-base:.375rem;
  --ds-r-2:.5rem;        /* o padrão: botões, inputs, cards */
  --ds-r-3:.75rem;
  --ds-r-4:1rem;
  --ds-r-5:1.25rem;
  --ds-r-6:1.5rem;
  --ds-r-half:50%;
  --ds-r-full:9999px;    /* badges */

  --ds-bw-1:.0625rem;    /* 1px — praticamente tudo */
  --ds-bw-2:.125rem;     /* 2px — só o indicador de tab ativa */
  --ds-bw-3:.1875rem;
  --ds-bw-4:1rem;
  --ds-bw-5:1.25rem;

  /* ---------- sombra ---------- */
  --ds-shadow-0:none;
  --ds-shadow-1:0px 0px 1px 0px #888888;                                /* hover sutil */
  --ds-shadow-2:0px 0px 2px 0px #888888;
  --ds-shadow-3:0px 3px 6px 0px #d1d1d1,0px 0px 1px 0px #888888;        /* dropdown */
  --ds-shadow-4:0px 12px 16px 0px #d1d1d1,0px 0px 1px 0px #888888;      /* toast */
  --ds-shadow-5:0px 24px 32px 0px #d1d1d1,0px 0px 1px 0px #888888;      /* modal */

  /* ---------- espaçamento (base 4px) ---------- */
  --ds-sp-0-5:.125rem;  --ds-sp-1:.25rem;     --ds-sp-1-5:.375rem;  --ds-sp-2:.5rem;
  --ds-sp-2-5:.625rem;  --ds-sp-3:.75rem;     --ds-sp-3-5:.875rem;  --ds-sp-4:1rem;
  --ds-sp-4-5:1.125rem; --ds-sp-5:1.25rem;    --ds-sp-6:1.5rem;     --ds-sp-7:1.75rem;
  --ds-sp-8:2rem;       --ds-sp-9:2.25rem;    --ds-sp-10:2.5rem;    --ds-sp-11:2.75rem;
  --ds-sp-12:3rem;      --ds-sp-14:3.5rem;    --ds-sp-16:4rem;      --ds-sp-18:4.5rem;
  --ds-sp-20:5rem;

  /* ---------- camadas ---------- */
  --ds-z-100:100;  /* rail */
  --ds-z-200:200;  /* cabeçalho */
  --ds-z-300:300;
  --ds-z-400:400;  /* dropdown */
  --ds-z-500:500;
  --ds-z-600:600;
  --ds-z-700:700;
  --ds-z-800:800;  /* overlay de modal */
  --ds-z-900:900;  /* toast */

  /* ---------- movimento ---------- */
  --ds-speed-fast:150ms;     /* hover, foco */
  --ds-speed-base:300ms;     /* abertura de modal e painel */
  --ds-speed-slow:450ms;
  --ds-speed-slower:600ms;   /* spinner */

  /* ---------- densidade (acréscimo nosso; medido no original) ---------- */
  --ds-control-balcao:56px;  /* venda, checkout, troca, caixa */
  --ds-control-gestao:40px;  /* catálogo, inventário, configurações */
  --ds-control:var(--ds-control-gestao);

  /* ---------- breakpoints (referência; media query não lê var) ---------- */
  --ds-bp-sm:672px;
  --ds-bp-md:1024px;
  --ds-bp-lg:1200px;
}

/* Densidade responsiva: tipo de ponteiro manda acima de largura de tela. */
@media (min-width:1024px){ :root{ --ds-control:var(--ds-control-balcao); } }
@media (pointer:coarse){   :root{ --ds-control:48px; } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}