/* ============================================
   LUDOVARA — DESIGN SYSTEM VARIABLES
   ============================================ */

:root {
  /* === CORES === */
  --color-green-dark:    #2F4722;
  --color-green-accent:  #66B75F;
  --color-green-hover:   #4E9048;
  --color-beige:         #F2E8C8;
  --color-beige-light:   #FAF4E1;
  --color-brown-dark:    #5A2D12;
  --color-brown-mid:     #A6633A;
  --color-white:         #FFFFFF;
  --color-black:         #111111;
  --color-gray:          #555555;
  --color-gray-light:    #E8E0D0;
  --color-red:           #B32618;
  --color-border:        rgba(166, 99, 58, 0.30);
  --color-overlay:       rgba(47, 71, 34, 0.12);

  /* === TIPOGRAFIA === */
  --font-title: Georgia, 'Times New Roman', serif;
  --font-body:  'Montserrat', Arial, Helvetica, sans-serif;

  /* Tamanhos responsivos com clamp */
  --text-hero:    clamp(34px, 5vw, 52px);
  --text-h2:      clamp(26px, 4vw, 38px);
  --text-h3:      clamp(20px, 2.5vw, 26px);
  --text-h4:      clamp(17px, 2vw, 20px);
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-small:   14px;
  --text-xs:      12px;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  --line-heading: 1.2;
  --line-body:    1.6;

  /* === ESPAÇAMENTO (múltiplos de 8) === */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  80px;

  /* === CONTAINER === */
  --container-max: 1200px;
  --container-px:  80px;
  --section-py:    80px;

  /* === COMPONENTES === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-hover: 0 8px 24px rgba(47, 71, 34, 0.18);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* === HEADER === */
  --header-height: 72px;
}

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --container-px: 40px;
    --section-py:   60px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --container-px: 20px;
    --section-py:   48px;
  }
}