/*
 * Casa de Carnes DESTAK — Design Tokens
 * Copiado verbatim de design/tokens.css (direcao "Acougue Noir")
 */

:root {

  /* --- Backgrounds --- */
  --base:              #0D0D0D;
  --surface-1:         #161616;
  --surface-2:         #1F1F1F;
  --surface-3:         #2A2A2A;

  /* --- Marca / Acento --- */
  --accent:            #E00000;
  --accent-surface:    #D80000;
  --accent-hover:      #C80000;
  --accent-press:      #B80000;
  --accent-subtle:     rgba(255, 0, 0, 0.12);

  /* --- Promocao --- */
  --promo:             #F0A500;
  --promo-dark:        #C8860A;
  --promo-text:        #0D0D0D;

  /* --- Texto --- */
  --text-primary:      #F5F5F5;
  --text-secondary:    #A3A3A3;
  --text-muted:        #6B6B6B;
  --text-inverse:      #0D0D0D;

  /* --- Precos --- */
  --price-promo:       #F5F5F5;
  --price-original:    #6B6B6B;

  /* --- Bordas --- */
  --border:            #2A2A2A;
  --border-subtle:     #1A1A1A;
  --border-accent:     rgba(204, 26, 26, 0.5);

  /* --- Feedbacks --- */
  --success:           #22C55E;
  --success-subtle:    rgba(34, 197, 94, 0.12);
  --error:             #EF4444;
  --error-subtle:      rgba(239, 68, 68, 0.12);

  /* --- Canal WhatsApp --- */
  --whatsapp:          #25D366;
  --whatsapp-hover:    #1DAA54;
  --whatsapp-press:    #128C4F;
  --whatsapp-text:     #0D0D0D;

  /* --- Estado esgotado --- */
  --out-bg:            #1F1F1F;
  --out-text:          #4A4A4A;
  --out-img-opacity:   0.35;

  /* --- Overlay --- */
  --overlay-light:     rgba(0, 0, 0, 0.40);
  --overlay-mid:       rgba(0, 0, 0, 0.60);
  --overlay-heavy:     rgba(0, 0, 0, 0.75);

  --card-img-gradient: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.90) 0%,
    rgba(13, 13, 13, 0.30) 50%,
    transparent 100%
  );

  /* --- Familias --- */
  --font-display:  "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Pesos --- */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* --- Escala de tamanho --- */
  --text-xs:           0.75rem;
  --text-sm:           0.875rem;
  --text-base:         1rem;
  --text-lg:           1.125rem;
  --text-xl:           1.25rem;
  --text-2xl:          1.5rem;
  --text-3xl:          1.875rem;
  --text-4xl:          clamp(2rem, 8vw, 2.5rem);

  --text-price-promo:  clamp(1.75rem, 6vw, 2.25rem);
  --text-price-orig:   0.875rem;

  /* --- Line heights --- */
  --leading-tight:     1.15;
  --leading-snug:      1.3;
  --leading-normal:    1.5;
  --leading-relaxed:   1.65;

  /* --- Espacamento (base 4px) --- */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;

  /* --- Grid --- */
  --page-padding:       var(--space-4);
  --card-gap:           var(--space-3);
  --container-max:      1024px;
  --header-height:      56px;
  --header-height-lg:   64px;
  --category-bar-top:   var(--header-height);

  /* --- Border radius --- */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* --- Sombras --- */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.65);
  --shadow-xl:    0 16px 40px rgba(0, 0, 0, 0.75);
  --shadow-accent: 0 0 0 2px rgba(255, 0, 0, 0.35);

  /* --- Motion --- */
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    320ms;
  --duration-page:    400ms;

  --easing-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in:        cubic-bezier(0.4, 0, 1, 1);
  --easing-in-out:    cubic-bezier(0.45, 0, 0.55, 1);

  /* --- Z-index layers --- */
  --z-base:       1;
  --z-card:       10;
  --z-header:     100;
  --z-category:   90;
  --z-overlay:    200;
  --z-drawer:     300;
  --z-modal:      400;
  --z-toast:      500;

  --img-aspect-card:  1 / 1;

  /* --- Composed slots --- */
  --btn-primary-bg:       var(--accent-surface);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-bg-press: var(--accent-press);
  --btn-primary-text:     var(--text-primary);
  --btn-primary-radius:   var(--radius-md);

  --btn-wpp-bg:           var(--whatsapp);
  --btn-wpp-bg-hover:     var(--whatsapp-hover);
  --btn-wpp-bg-press:     var(--whatsapp-press);
  --btn-wpp-text:         var(--whatsapp-text);
  --btn-wpp-radius:       var(--radius-md);

  --btn-disabled-bg:      var(--surface-3);
  --btn-disabled-text:    var(--text-muted);

  --input-bg:             var(--surface-2);
  --input-border:         var(--border);
  --input-border-focus:   var(--accent);
  --input-shadow-focus:   var(--shadow-accent);
  --input-text:           var(--text-primary);
  --input-placeholder:    var(--text-secondary);
  --input-radius:         var(--radius-md);

  --card-bg:              var(--surface-1);
  --card-border:          var(--border);
  --card-border-hover:    var(--accent);
  --card-radius:          var(--radius-lg);
  --card-shadow:          var(--shadow-md);
  --card-shadow-hover:    var(--shadow-lg);
  --card-padding:         var(--space-3);

  --badge-promo-bg:       var(--promo);
  --badge-promo-text:     var(--promo-text);
  --badge-promo-radius:   0 0 var(--radius-sm) 0;

  --chip-bg:              var(--surface-2);
  --chip-bg-active:       var(--accent-surface);
  --chip-text:            var(--text-secondary);
  --chip-text-active:     var(--text-primary);
  --chip-radius:          var(--radius-full);

  --header-bg:            var(--base);
  --header-border:        var(--border);

  --drawer-bg:            var(--surface-1);
  --drawer-radius:        var(--radius-xl) var(--radius-xl) 0 0;
  --drawer-shadow:        var(--shadow-xl);

  --skeleton-base:        var(--surface-2);
  --skeleton-shine:       var(--surface-3);

  --price-promo-size:     var(--text-price-promo);
  --price-promo-font:     var(--font-display);
  --price-promo-weight:   var(--fw-extrabold);
  --price-promo-color:    var(--price-promo);
  --price-orig-size:      var(--text-price-orig);
  --price-orig-color:     var(--price-original);

  --qty-bg:               var(--surface-2);
  --qty-border:           var(--border);
  --qty-radius:           var(--radius-md);
  --qty-btn-color:        var(--accent);
  --qty-height:           36px;

  --logo-size-topbar:     40px;
  --desc-max-lines:       2;
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.skeleton {
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:  0ms;
    --duration-base:  0ms;
    --duration-slow:  0ms;
    --duration-page:  0ms;
  }
  .skeleton { animation: none; background: var(--skeleton-base); }
}