/* ============================================================
   LACMOO — variables.css
   Tokens globais: cores, tipografia, espaçamentos, sombras
   Fase 1 | Projeto Escolar — Curso Técnico em Agronegócio
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     PALETA PRINCIPAL — Rosa & Marrom
  ---------------------------------------------------------- */

  /* Fundos */
  --color-bg-main:        #F5DAD8;   /* rosa pastel — fundo principal */
  --color-bg-secondary:   #F2C5B8;   /* rosa suave — seções alternadas */
  --color-bg-accent:      #EAB1AE;   /* rosa mais forte — destaques */
  --color-bg-white:       #FDF6F0;   /* creme quente — cards, navbar */
  --color-bg-dark:        #3D2A29;   /* marrom bem escuro — seções escuras */

  /* Textos */
  --color-text-primary:   #5C4A49;   /* marrom chocolate — texto principal */
  --color-text-secondary: #8F7775;   /* marrom suave — texto secundário */
  --color-text-muted:     #AD8777;   /* bege quente — texto discreto */
  --color-text-light:     #FDF6F0;   /* creme — texto em fundo escuro */
  --color-text-dark:      #02080C;   /* quase preto — títulos fortes */

  /* Bordas e divisores */
  --color-border:         #D4A9A6;   /* rosa médio — bordas suaves */
  --color-border-strong:  #02080C;   /* preto — divisores marcantes */
  --color-border-light:   #F2C5B8;   /* rosa suave — bordas finas */

  /* Interações */
  --color-primary:        #C4847F;   /* rosa escuro — botões primários */
  --color-primary-hover:  #B06E69;   /* rosa mais escuro — hover */
  --color-primary-light:  #EAB1AE;   /* rosa claro — hover suave */
  --color-secondary:      #8F7775;   /* marrom suave — botões secundários */
  --color-secondary-hover:#5C4A49;   /* marrom forte — hover secundário */

  /* Feedback */
  --color-success:        #7BAF8A;   /* verde suave — sucesso */
  --color-warning:        #D4A853;   /* âmbar — aviso */
  --color-error:          #C0504A;   /* vermelho suave — erro */
  --color-info:           #7A9FBF;   /* azul suave — informação */

  /* Carrinho / Badge */
  --color-badge:          #5C4A49;   /* marrom escuro — badge contador */
  --color-badge-text:     #FDF6F0;   /* creme — texto do badge */

  /* ----------------------------------------------------------
     TIPOGRAFIA
  ---------------------------------------------------------- */

  /* Famílias */
  --font-display:   'Playfair Display', 'Georgia', serif;   /* títulos elegantes */
  --font-body:      'Lato', 'Helvetica Neue', sans-serif;   /* corpo de texto */
  --font-accent:    'Pacifico', cursive;                    /* slogan / destaque especial */
  --font-ui:        'Lato', sans-serif;                     /* botões, labels, nav */

  /* Escala tipográfica */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   2rem;       /*  32px */
  --text-3xl:   2.5rem;     /*  40px */
  --text-4xl:   3rem;       /*  48px */
  --text-5xl:   3.75rem;    /*  60px */

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

  /* Altura de linha */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ----------------------------------------------------------
     ESPAÇAMENTO — escala de 4px
  ---------------------------------------------------------- */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ----------------------------------------------------------
     BORDAS E RAIOS
  ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;   /* pílula / círculo */

  --border-thin:   1px;
  --border-base:   2px;
  --border-thick:  3px;

  /* ----------------------------------------------------------
     SOMBRAS — quentes e suaves
  ---------------------------------------------------------- */

  --shadow-xs:  0 1px 3px rgba(92, 74, 73, 0.08);
  --shadow-sm:  0 2px 8px rgba(92, 74, 73, 0.12);
  --shadow-md:  0 4px 16px rgba(92, 74, 73, 0.16);
  --shadow-lg:  0 8px 32px rgba(92, 74, 73, 0.20);
  --shadow-xl:  0 16px 48px rgba(92, 74, 73, 0.24);
  --shadow-card: 0 4px 20px rgba(92, 74, 73, 0.14);

  /* ----------------------------------------------------------
     TRANSIÇÕES
  ---------------------------------------------------------- */

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

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --navbar-height:  72px;
  --cart-width:     420px;   /* largura do drawer do carrinho */

  /* ----------------------------------------------------------
     Z-INDEX — camadas da interface
  ---------------------------------------------------------- */

  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-navbar:   300;
  --z-overlay:  400;
  --z-drawer:   500;
  --z-modal:    600;
  --z-toast:    700;
}

/* ----------------------------------------------------------
   BREAKPOINTS (referência — usar em media queries)
   --sm:  640px
   --md:  768px
   --lg:  1024px
   --xl:  1280px
   --2xl: 1440px
---------------------------------------------------------- */