/* ============================================================
   MARTIN D' MOR - Design Tokens
   Variaveis globais do sistema de design
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     TIPOGRAFIA - Familias
     ---------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-accent: 'Bianca Sans', 'Playfair Display', cursive;

  /* ----------------------------------------------------------
     TIPOGRAFIA - Tamanhos
     ---------------------------------------------------------- */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.5rem;     /* 40px */

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

  /* ----------------------------------------------------------
     TIPOGRAFIA - Alturas de linha
     ---------------------------------------------------------- */
  --leading-tight:   1.2;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ----------------------------------------------------------
     TIPOGRAFIA - Espacamento entre letras
     ---------------------------------------------------------- */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.12em;

  /* ----------------------------------------------------------
     CORES - Marca Martin D' Mor
     ---------------------------------------------------------- */
  --color-primary:       #403D2E;   /* Verde oliva escuro — cor principal */
  --color-primary-hover: #33311F;   /* Verde oliva mais escuro — hover */
  --color-secondary:     #807B5E;   /* Verde oliva médio — textos secundários */
  --color-accent:        #BFB88E;   /* Sage — tags, badges, highlights */
  --color-ivory:         #E6DCA9;   /* Marfim — logo, destaques premium */
  --color-cream:         #F2EDD3;   /* Creme — backgrounds alternados */

  /* ----------------------------------------------------------
     CORES - Neutras (ajustadas para harmonia)
     ---------------------------------------------------------- */
  --color-white:       #FFFFFF;
  --color-black-deep:  #403D2E;   /* Agora usa oliva ao invés de preto */
  --color-text:        #1A1A1A;   /* Preto suave para legibilidade */
  --color-muted:       #807B5E;   /* Oliva médio */
  --color-border:      #E6DCA9;   /* Marfim como borda */
  --color-bg-light:    #F9F8F3;   /* Background levemente warm */
  --color-bg:          #FFFFFF;

  /* ----------------------------------------------------------
     CORES - Acentos e estados
     ---------------------------------------------------------- */
  --color-gold:        #BFB88E;   /* Sage substituindo dourado */
  --color-gold-hover:  #A8A27A;
  --color-error:       #DC3545;
  --color-success:     #28A745;
  --color-warning:     #FFC107;

  /* ----------------------------------------------------------
     CORES - Rodapé
     ---------------------------------------------------------- */
  --color-footer-bg:      #403D2E;   /* Oliva escuro */
  --color-footer-text:    #F2EDD3;   /* Creme */
  --color-footer-link:    #BFB88E;   /* Sage */
  --color-footer-border:  #807B5E;   /* Oliva médio */

  /* ----------------------------------------------------------
     ESPACAMENTO - Escala de 8px
     ---------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30: 120px;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max:   1320px;
  --grid-columns:    12;
  --grid-gutter:     24px;
  --header-h:        72px;
  --header-h-mobile: 64px;

  /* ----------------------------------------------------------
     BORDAS E RAIOS
     ---------------------------------------------------------- */
  --radius-sm:    0;
  --radius-btn:   0;
  --radius-card:  0;
  --radius-modal: 0;
  --radius-full:  9999px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */
  --shadow-sm:    0 1px  3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-card:  0 2px  8px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.14);

  /* ----------------------------------------------------------
     MOVIMENTO - Duracoes
     ---------------------------------------------------------- */
  --duration-hover:      160ms;
  --duration-transition: 220ms;
  --duration-drawer:     260ms;
  --duration-popup:      300ms;

  /* ----------------------------------------------------------
     MOVIMENTO - Curvas
     ---------------------------------------------------------- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     Z-INDEX - Camadas
     ---------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;

  /* ----------------------------------------------------------
     BREAKPOINTS (referencia - usar em media queries)
     ---------------------------------------------------------- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1400px;

  /* ----------------------------------------------------------
     V5 — PRODUTO (PDP)
     ---------------------------------------------------------- */
  --product-panel-padding: 60px;
  --product-title-size: 36px;
  --product-price-size: 22px;
  --product-btn-height: 52px;
  --product-btn-letter-spacing: 3px;

  /* ----------------------------------------------------------
     V5 — CARDS
     ---------------------------------------------------------- */
  --card-btn-height: 44px;
  --card-name-size: 16px;
  --card-price-size: 15px;
}