/* ============================================================
   variables.css — Design System TRIPACON
   Tokens globais: cores, tipografia, espaçamento, sombras
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     CORES PRINCIPAIS
     ---------------------------------------------------------- */
  --color-primary:        #9cd56c;
  --color-primary-dark:   #00693d;
  --color-primary-hover:  #005a34;
  --color-bg-dark:        #000c07;
  --color-bg-light:       #fdfffe;

  --color-text:           #0d1f18;
  --color-text-muted:     #4a5e55;
  --color-text-light:     rgba(255, 255, 255, 0.85);
  --color-text-lighter:   rgba(255, 255, 255, 0.55);

  --color-surface:        #f2f7ef;
  --color-surface-2:      #e8f2e2;
  --color-border:         #dbebd2;
  --color-border-dark:    #1a2e22;
  --color-white:          #ffffff;

  /* ----------------------------------------------------------
     TIPOGRAFIA
     ---------------------------------------------------------- */
  --font-base: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --fs-xs:   0.6875rem;
  --fs-sm:   0.8125rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-base:    1.6;
  --lh-relaxed: 1.75;

  /* ----------------------------------------------------------
     ESPAÇAMENTO
     ---------------------------------------------------------- */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* ----------------------------------------------------------
     SOMBRAS E TRANSIÇÕES
     ---------------------------------------------------------- */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 32px rgba(0, 105, 61, 0.20);

  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   400ms ease;
  --t-spring: 300ms cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max: 1280px;
  --container-px:  clamp(1rem, 4vw, 2rem);
  --header-h:      72px;
  --topbar-h:      40px;
  --section-py:    clamp(3rem, 6vw, 5rem);

  /* Hero — altura fixa (não varia entre slides) */
  --hero-h:        400px;
  --hero-h-mobile: 340px;

  /* ----------------------------------------------------------
     IMAGENS — dimensões de exportação (formato: JPG, sRGB, ~80%)
     banners/hero-XX.jpg      → 1440 × 400 px
     categorias/[slug].jpg    → 600 × 400 px
     produtos/[slug]/principal.jpg   → 800 × 800 px
     produtos/[slug]/galeria-XX.jpg  → 800 × 800 px
     logo/                    → SVG (vetorial)
     ---------------------------------------------------------- */

  --z-sticky:   200;
  --z-dropdown: 100;
}