/* =========================================================================
   variables.css — Tokens visuais do sistema
   -------------------------------------------------------------------------
   Única fonte de verdade para cores, espaçamento, tipografia, raios e sombras.
   Trocar identidade visual da loja = mudar apenas este arquivo.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     PALETA BASE
     Neutros operacionais + accent laranja (food-friendly, alta visibilidade).
     --------------------------------------------------------------------- */

  /* Neutros */
  --color-bg:              #ffffff;
  --color-surface:         #ffffff;
  --color-surface-alt:     #f5f5f5;
  --color-surface-muted:   #fafafa;
  --color-border:          #e5e5e5;
  --color-border-strong:   #d4d4d4;
  --color-text:            #1a1a1a;
  --color-text-muted:      #525252;
  --color-text-subtle:     #737373;
  --color-text-inverse:    #ffffff;

  /* Primary (CTA principal — adicionar, finalizar, confirmar) */
  --color-primary:         #f97316;
  --color-primary-hover:   #ea6b0e;
  --color-primary-press:   #c55a0c;
  --color-primary-soft:    #ffedd5;
  --color-primary-text:    #ffffff;

  /* Secundária (ações menos críticas, links) */
  --color-secondary:       #0f172a;
  --color-secondary-hover: #1e293b;
  --color-secondary-text:  #ffffff;

  /* Semânticos (feedback) */
  --color-success:         #16a34a;
  --color-success-soft:    #dcfce7;
  --color-warning:         #d97706;
  --color-warning-soft:    #fef3c7;
  --color-danger:          #dc2626;
  --color-danger-soft:     #fee2e2;
  --color-info:            #2563eb;
  --color-info-soft:       #dbeafe;

  /* ---------------------------------------------------------------------
     CORES DE STATUS DO PEDIDO
     Mapeadas 1:1 com a matriz de status (seção 11 das regras de negócio).
     Usadas em badges, bordas de card, timeline.
     --------------------------------------------------------------------- */

  --status-pedido-criado-bg:            #f5f5f5;
  --status-pedido-criado-fg:            #525252;

  --status-aguardando-pagamento-bg:     #fef3c7;
  --status-aguardando-pagamento-fg:     #92400e;

  --status-pagamento-em-analise-bg:     #fef3c7;
  --status-pagamento-em-analise-fg:     #92400e;

  --status-pagamento-confirmado-bg:     #dbeafe;
  --status-pagamento-confirmado-fg:     #1e40af;

  --status-pedido-aceito-bg:            #dbeafe;
  --status-pedido-aceito-fg:            #1e40af;

  --status-em-preparo-bg:               #ede9fe;
  --status-em-preparo-fg:               #5b21b6;

  --status-pronto-retirada-bg:          #ccfbf1;
  --status-pronto-retirada-fg:          #115e59;

  --status-aguardando-entregador-bg:    #ccfbf1;
  --status-aguardando-entregador-fg:    #115e59;

  --status-saiu-entrega-bg:             #cffafe;
  --status-saiu-entrega-fg:             #155e75;

  --status-proximo-destino-bg:          #cffafe;
  --status-proximo-destino-fg:          #155e75;

  --status-entregue-bg:                 #dcfce7;
  --status-entregue-fg:                 #166534;

  --status-concluido-bg:                #bbf7d0;
  --status-concluido-fg:                #14532d;

  --status-cancelado-bg:                #fee2e2;
  --status-cancelado-fg:                #991b1b;

  --status-recusado-bg:                 #fee2e2;
  --status-recusado-fg:                 #991b1b;

  --status-alterado-bg:                 #fef3c7;
  --status-alterado-fg:                 #92400e;

  /* ---------------------------------------------------------------------
     ESPAÇAMENTO (escala base 4px)
     --------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;

  /* ---------------------------------------------------------------------
     TIPOGRAFIA
     Stack de sistema = performance máxima no mobile.
     --------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;  /* base — nunca abaixo disso em input/botão no mobile */
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  28px;
  --fs-4xl:  32px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------------------------------------------------------------------
     RAIOS (bordas arredondadas)
     --------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     SOMBRAS
     --------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-up:  0 -4px 16px rgba(0, 0, 0, 0.08); /* carrinho inferior */

  /* ---------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------- */
  --z-base:      1;
  --z-header:   10;
  --z-bottom:   20;   /* bottom cart bar */
  --z-drawer:   90;
  --z-modal:   100;
  --z-toast:   110;
  --z-top:     999;

  /* ---------------------------------------------------------------------
     TRANSIÇÕES
     --------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --max-w-mobile:  480px;   /* largura máx. cliente (mobile-first) */
  --max-w-tablet:  768px;
  --max-w-admin:  1280px;
  --header-height: 56px;
  --bottom-cart-height: 72px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Preparação para dark mode futuro — não ativa agora, mas deixamos o hook. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    /* override futuro aqui */
  }
}