/* ==========================================================================
   Chase Design System — Variables & Tokens
   Paleta, tipografia, espaçamento, bordas, sombras e transições.
   Fonte: IDENTIDADE VISUAL.png (manual de marca)
   ========================================================================== */

:root {
  /* ── Cores da marca (interface) ── */
  --chase-blue: #176CA6;
  --chase-blue-rgb: 23, 108, 166;
  --chase-blue-dark: #0f4f7a;
  --chase-blue-darker: #0a3a5c;
  --chase-blue-light: #1a7fbe;
  --chase-blue-lightest: #e8f2f9;
  --chase-gold: #D99A24;
  /* Amarelo do logo — não é o mesmo que --chase-gold. Vem do SVG da marca
     (#ffd100) e é usado na lupa do header e nos detalhes do logo. */
  --chase-yellow: #ffd100;
  --chase-gold-rgb: 217, 154, 36;
  --chase-gold-dark: #b87e1a;
  --chase-gold-light: #f5e6c4;
  --chase-gold-lightest: #faf3e0;
  /* Branco desde 31/08/2026, a pedido do proprietario. Era #F4F1EA, um creme.
     ATENCAO: a secao alternada da home usava --chase-white, o que com o corpo
     branco a deixaria invisivel. Ela passou a usar --chase-gray-50 para o
     ritmo das faixas sobreviver -- ver .chase-section--alt no layout.css.
     O fundo dos E-MAILS nao vem daqui: e a opcao
     woocommerce_email_background_color, no banco, e segue creme. */
  --chase-bg: #ffffff;
  --chase-bg-rgb: 255, 255, 255;

  /* Fundo das faixas alternadas da home. Cinza levemente azulado, e nao um
     passo da escala neutra: com o corpo branco, o --chase-gray-50 (#f9fafb)
     ficava perto demais para o olho separar uma faixa da outra. */
  --chase-bg-alt: #ecf0f1;
  --chase-text: #22282B;
  --chase-text-rgb: 34, 40, 43;

  /* ── Cores neutras ── */
  --chase-white: #ffffff;
  --chase-gray-50: #f9fafb;
  --chase-gray-100: #f3f4f6;
  --chase-gray-200: #e5e7eb;
  --chase-gray-300: #d1d5db;
  --chase-gray-400: #9ca3af;
  --chase-gray-500: #6b7280;
  --chase-gray-600: #4b5563;
  --chase-gray-700: #374151;
  --chase-gray-800: #1f2937;
  --chase-gray-900: #111827;
  --chase-border: #ddd8ce;
  --chase-border-light: #e8e4db;

  /* ── Cores semânticas ── */
  --chase-success: #16a34a;
  --chase-success-light: #dcfce7;
  --chase-error: #dc2626;
  --chase-error-light: #fef2f2;
  --chase-warning: #f59e0b;
  --chase-warning-light: #fffbeb;
  --chase-info: #176CA6;
  --chase-info-light: #e8f2f9;

  /* ── Header ──
     Estes cinco tokens andam JUNTOS. Trocar só o fundo quebra a legibilidade:
     o header é escuro hoje, então todo o conteúdo dele conta com texto branco.

     Contraste medido sobre o #008ecf atual:
       branco        3,6:1  — abaixo do AA para texto normal, escolha consciente
                              do proprietário em 17/08/2026 (registrado em
                              MELHORIAS.md, item A2)
       --chase-text  4,2:1  — também abaixo, e pior visualmente sobre azul médio

     Se algum dia o fundo voltar a ser claro, --chase-header-text precisa voltar
     a --chase-text, o realce precisa ESCURECER em vez de clarear, e o logo do
     header volta para a variante azul. Não é só o token do fundo. */
  --chase-header-bg: #008ecf;
  --chase-header-text: var(--chase-white);

  /* Sobre fundo escuro o texto já é branco, então hover não tem para onde
     clarear — quem sinaliza é uma superfície translúcida, não a cor da letra. */
  --chase-header-hover: rgba(255, 255, 255, 0.16);
  --chase-header-accent: var(--chase-white);

  /* Lupa do botão de busca. O círculo continua --chase-blue e fica DENTRO do
     campo branco, então o amarelo é medido contra ele: 3,8:1, acima do mínimo
     de 3:1 para elemento gráfico de interface. */
  --chase-header-search-icon: var(--chase-yellow);

  /* ── Tipografia ── */
  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */

  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest: 0.2em;

  /* ── Espaçamento ── */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ── Bordas ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-xs: 0 1px 2px rgba(34, 40, 43, 0.04);
  --shadow-sm: 0 1px 3px rgba(34, 40, 43, 0.06), 0 1px 2px rgba(34, 40, 43, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(34, 40, 43, 0.07), 0 2px 4px -2px rgba(34, 40, 43, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(34, 40, 43, 0.08), 0 4px 6px -4px rgba(34, 40, 43, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(34, 40, 43, 0.1), 0 8px 10px -6px rgba(34, 40, 43, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(34, 40, 43, 0.2);
  --shadow-inner: inset 0 2px 4px rgba(34, 40, 43, 0.05);

  /* ── Transições ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container-max: 1280px;
  --container-narrow: 960px;
  --container-wide: 1440px;
  --header-height: 72px;
  --announcement-height: 40px;
  --sidebar-width: 280px;

  /* ── Z-index ── */
  /* A escala TEM que conviver com z-index de terceiro, e a antiga não convivia:
     ela ia de 100 a 500 enquanto o `#masthead.site-header` do Storefront usa
     `position: relative; z-index: 999`. Como ele cria contexto de
     empilhamento, o z-index do nosso header interno é irrelevante na disputa —
     quem compete é o 999. Painel em 400 era pintado POR BAIXO do header, e o
     cabeçalho do carrinho lateral (título e botão de fechar) ficava escondido
     atrás da faixa azul. Diagnosticado em 19/08/2026.

     Com quem dividimos o frontend, medido nos arquivos:
       999          .site-header do Storefront
       1051         select2 (campos de seleção do checkout)
       2000..20000  prettyPhoto (lightbox da imagem do produto)
       9999         overlay de carregamento do WooCommerce

     Overlay e modal passam de 999 e ficam ABAIXO do 9999 de propósito: quando
     o WooCommerce está atualizando o carrinho, a máscara de carregamento deve
     aparecer sobre o painel, não atrás dele. */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 9999;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-spring: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}