/* ==========================================================================
   Baiamar Beachwear — design tokens
   Fonte única de verdade para cor, tipografia, espaçamento e raio.
   Regra do projeto: componentes NUNCA usam hex literal. Só var(--...).
   ========================================================================== */

:root {
  /* --- Paleta da marca (valores brutos, não usar direto em componente) --- */
  --ba-bay:           #0E4F5C; /* azul-baía, cor institucional */
  --ba-bay-dark:      #0A3E49;
  --ba-turquoise:     #2A97A5;
  --ba-coral:         #D65A32;
  --ba-coral-soft:    #F2A072;
  --ba-foam:          #DCEDEA;
  --ba-sand:          #FBF6EE;
  --ba-sand-deep:     #F3EDE3;
  --ba-line:          #D8D0C2;
  --ba-line-strong:   #C4B69C;
  --ba-white:         #FFFFFF;

  /* --- Texto --- */
  --text:             #2B4A50; /* corpo */
  --text-strong:      #0E4F5C; /* títulos, números */
  --text-muted:       #4E6A6F; /* legenda, label secundário */
  --text-on-dark:     #FBF6EE;
  --text-on-accent:   #FFFFFF;

  /* --- Superfícies --- */
  --surface:          var(--ba-sand);      /* fundo da aplicação */
  --surface-raised:   var(--ba-white);     /* card, modal, linha de tabela */
  --surface-sunk:     var(--ba-sand-deep); /* fundo de seção, área de filtro */
  --surface-accent:   var(--ba-foam);      /* destaque calmo, badge neutro */
  --surface-inverse:  var(--ba-bay);       /* header, sidebar, rodapé */

  --border:           var(--ba-line);
  --border-strong:    var(--ba-line-strong);

  /* --- Ação --- */
  --action:           var(--ba-bay);
  --action-hover:     var(--ba-bay-dark);
  --action-text:      var(--text-on-dark);
  --action-quiet:     transparent;          /* botão secundário: borda + texto */
  --action-quiet-text: var(--ba-bay);

  --highlight:        var(--ba-coral);      /* preço, promoção, CTA de venda */
  --highlight-text:   var(--text-on-accent);

  --focus-ring:       var(--ba-turquoise);

  /* --- Estados (derivados da paleta, não cores genéricas de framework) --- */
  --ok:               #2E7D62; /* venda registrada, sincronizado */
  --warn:             #8F5A0F; /* estoque baixo */
  --danger:           #B23A24; /* sem estoque, erro */
  --state-text:       var(--ba-white); /* todos os três passam 4.5:1 com branco */

  /* --- Tipografia --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-numeric:  var(--font-sans); /* preço e quantidade: tabular, ver utilitário abaixo */

  /* Eixos variáveis da Fraunces — é isso que dá o ar praiano da marca */
  --display-axes: "SOFT" 70, "WONK" 1, "opsz" 144;

  --size-xs:   12px;
  --size-sm:   14px;
  --size-base: 15px;
  --size-md:   17px;
  --size-lg:   20px;
  --size-xl:   24px;
  --size-2xl:  30px;
  --size-3xl:  38px;
  --size-4xl:  48px;

  --leading-tight: 1.05; /* só display */
  --leading-snug:  1.25;
  --leading-body:  1.5;

  --tracking-display: -0.025em;
  --tracking-label:    0.2em; /* caixa alta, usar com parcimônia */

  /* --- Espaçamento (base 4) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Raio: hierarquia, não um valor só --- */
  --radius-sm:   6px;  /* input, badge, botão */
  --radius-md:  10px;  /* card, linha de produto */
  --radius-lg:  14px;  /* modal, painel */
  --radius-pill: 999px;

  /* --- Elevação: discreta, com tom da marca em vez de cinza --- */
  --shadow-sm: 0 1px 2px rgba(14, 79, 92, 0.08);
  --shadow-md: 0 4px 14px rgba(14, 79, 92, 0.10);

  /* --- Toque --- */
  --touch-min: 44px; /* altura mínima de qualquer alvo clicável */
}

/* Utilitários mínimos que os componentes podem usar */
.ba-display {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.ba-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}