/**
 * tokens.css
 * Sistema de design AUTTEON — única fonte de verdade para cores, tipografia
 * e espaçamento. Nunca hardcode um valor de cor fora deste arquivo.
 */

:root {
  /* ---- Cor ---- */
  --color-bg:            #0A0A0C;   /* fundo principal, preto quase puro */
  --color-bg-elevated:   #131316;   /* cards, header, superfícies elevadas */
  --color-bg-elevated-2: #1B1B1F;   /* hover de cards / inputs */
  --color-border:        #26262B;
  --color-border-soft:   #1D1D21;

  --color-text:          #F5F5F3;
  --color-text-muted:    #9A9AA2;
  --color-text-faint:    #5C5C63;

  --color-accent:        #FF6A00;
  --color-accent-hover:  #FF8A33;
  --color-accent-soft:   rgba(255, 106, 0, 0.12);

  /* Fundo padrão atrás de toda foto de produto (cards, galeria, carrinho) */
  --color-image-bg:      #FFFFFF;

  --color-success:       #3ECF8E;

  /* ---- Tipografia ---- */
  --font-display: 'Clash Display', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.5rem;
  --fs-4xl:  5rem;

  /* ---- Espaçamento ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container-max: 1360px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --header-h: 84px;

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
}

@media (max-width: 720px) {
  :root {
    --fs-3xl: 2.5rem;
    --fs-4xl: 3rem;
    --header-h: 64px;
  }
}