/* ==========================================================
   PRIME MODA MASCULINA — DESIGN TOKENS
   Sistema de tokens visuais. Base de todo o CSS.

   NOTA DE MIGRAÇÃO:
   Os nomes das variáveis foram MANTIDOS do tema anterior (Granato)
   para preservar 100% da compatibilidade com o CSS, JS e HTML
   existentes. Apenas os VALORES foram trocados para a paleta da
   Prime (preto / branco / vermelho).

     --c-burgundy*  →  agora representa o PRETO da marca
     --c-cream*     →  agora representa o BRANCO / cinza claro
     --c-gold*      →  agora representa o VERMELHO da marca
   ========================================================== */

:root {

  /* ----------------------------------------------------------
     CORES BRAND — Prime Moda Masculina
     Paleta: PRETO (#0F0F0F) + BRANCO + VERMELHO (#ED1B24)
  ---------------------------------------------------------- */

  /* Preto da marca (era vinho) */
  --c-burgundy:        #0F0F0F;
  --c-burgundy-light:  #1F1D1B;
  --c-burgundy-dark:   #000000;

  /* Branco / cinzas claros (era creme) */
  --c-cream:           #F5F5F5;
  --c-cream-light:     #FAFAFA;
  --c-cream-dark:      #E0E0E0;

  /* Backgrounds claros */
  --c-bg:              #FAFAFA;
  --c-bg-warm:         #F5F5F5;

  /* Vermelho marca (era dourado) */
  --c-gold:            #ED1B24;
  --c-gold-light:      #F23A42;
  --c-gold-dark:       #C8141C;
  --c-gold-muted:      #D63A40;

  /* ----------------------------------------------------------
     NEUTROS — escala fria/neutra (era warm/brown)
  ---------------------------------------------------------- */
  --c-ink:             #0A0A0A;
  --c-dark:            #100F0D;
  --c-gray-800:        #2A2A2A;
  --c-gray-600:        #6B6B6B;
  --c-gray-400:        #A8A8A8;
  --c-gray-200:        #E5E5E5;
  --c-gray-100:        #EFEFEF;
  --c-white:           #FFFFFF;

  /* Semânticos */
  --c-text:            var(--c-dark);
  --c-text-muted:      var(--c-gray-600);
  --c-text-light:      var(--c-gray-400);
  --c-border:          var(--c-gray-200);
  --c-border-subtle:   var(--c-gray-100);
  --c-surface:         var(--c-white);

  /* Semânticos de contraste */
  --c-text-on-dark:    var(--c-cream);
  --c-text-on-gold:    var(--c-white);   /* texto branco sobre vermelho */

  /* Estados — distantes do vermelho marca pra não confundir */
  --c-success:         #16A34A;
  --c-error:           #B91C1C;
  --c-warning:         #D97706;

  /* ----------------------------------------------------------
     TIPOGRAFIA — Oswald (display) + Inter (body)
     Oswald: sans condensed bold, dialoga com o wordmark PRIME
     Inter: sans neutra moderna, ótima legibilidade em telas
  ---------------------------------------------------------- */
  --font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Scale — mobile first */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  5rem;       /* 80px */

  /* Pesos */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line-heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* Letter-spacing — ajustado pra Oswald (condensed; tracking neutro/positivo) */
  --ls-tight:   -0.005em;   /* era -0.03em — Oswald não aguenta tracking tão negativo */
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;
  --ls-widest:   0.2em;

  /* ----------------------------------------------------------
     ESPAÇAMENTO (escala de 4px) — mantido
  ---------------------------------------------------------- */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-7:   1.75rem;   /* 28px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-14:  3.5rem;    /* 56px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-32:  8rem;      /* 128px */

  /* ----------------------------------------------------------
     LAYOUT — mantido
  ---------------------------------------------------------- */
  --max-w-xs:   480px;
  --max-w-sm:   640px;
  --max-w-md:   768px;
  --max-w-lg:   1024px;
  --max-w-xl:   1280px;
  --max-w-2xl:  1440px;
  --max-w-full: 100%;

  --container-px-mobile:  var(--sp-5);
  --container-px-tablet:  var(--sp-8);
  --container-px-desktop: var(--sp-12);

  /* Header */
  --header-h-mobile:   60px;
  --header-h-desktop:  80px;
  --announce-h:        38px;

  /* Sidebar */
  --sidebar-w-menu:    320px;
  --sidebar-w-cart:    400px;

  /* ----------------------------------------------------------
     BORDAS & RAIOS — reduzido pra vibe geométrica masculina
  ---------------------------------------------------------- */
  --radius-xs:   0;        /* era 2px */
  --radius-sm:   0;        /* era 4px — moda masculina = corner sharp */
  --radius-md:   2px;      /* era 6px */
  --radius-lg:   4px;      /* era 12px */
  --radius-xl:   8px;      /* era 20px */
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SOMBRAS — tonalizadas no preto puro (era vinho)
     Alpha reduzido pra não ficar agressivo sobre fundo claro
  ---------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.16);
  --shadow-gold: 0 4px 20px rgba(237,27,36,0.22);  /* glow vermelho */

  /* ----------------------------------------------------------
     TRANSIÇÕES — mantidas
  ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
  --dur-drawer: 440ms;

  --t-fast:   var(--dur-fast) var(--ease-out);
  --t-base:   var(--dur-base) var(--ease-luxury);
  --t-slow:   var(--dur-slow) var(--ease-luxury);
  --t-drawer: var(--dur-drawer) var(--ease-out);

  /* ----------------------------------------------------------
     Z-INDEX — mantido
  ---------------------------------------------------------- */
  --z-neg:      -1;
  --z-base:      0;
  --z-above:     10;
  --z-dropdown:  50;
  --z-sticky:    100;
  --z-header:    110;
  --z-sidebar:   200;
  --z-overlay:   190;
  --z-modal:     300;
  --z-toast:     400;

  /* ----------------------------------------------------------
     INTERAÇÃO SEMÂNTICA
  ---------------------------------------------------------- */
  --focus-ring:        0 0 0 2px var(--c-gold);
  --focus-ring-offset: 2px;
  --disabled-opacity:  0.45;
  --hover-surface:     rgba(0,0,0,0.04);
  --overlay-dark:      rgba(0,0,0,0.55);

  /* ----------------------------------------------------------
     COMPONENTES ECOMMERCE
     product-img-ratio mudou para 3/4 — vibe vertical de moda
  ---------------------------------------------------------- */
  --btn-h-sm:           36px;
  --btn-h-base:         44px;
  --btn-h-lg:           52px;

  --card-radius:        var(--radius-sm);
  --product-img-ratio:  3 / 4;            /* era 1 / 1 — vertical para moda */

  --card-px:            var(--sp-4);
  --card-py:            var(--sp-4);
  --card-gap:           var(--sp-3);
}

/* Desktop overrides */
@media (min-width: 1024px) {
  :root {
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
  }
}