/* ==========================================================
   GRANATO JOIAS — DESIGN TOKENS
   Sistema de tokens visuais. Base de todo o CSS.
   ========================================================== */

:root {

  /* ----------------------------------------------------------
     CORES BRAND
  ---------------------------------------------------------- */
  --c-burgundy:        #4A0E16;
  --c-burgundy-light:  #6B1722;
  --c-burgundy-dark:   #2D0A0E;

  --c-cream:           #EEDEC4;
  --c-cream-light:     #F8F2E6;
  --c-cream-dark:      #D9C5A0;

  --c-bg:              #F7F5F0;
  --c-bg-warm:         #F2EEE6;

  --c-gold:            #D8BD67;
  --c-gold-light:      #E8D48A;
  --c-gold-dark:       #B8993E;
  --c-gold-muted:      #C9AD58;

  /* ----------------------------------------------------------
     NEUTROS
  ---------------------------------------------------------- */
  --c-ink:             #1C0F0A;
  --c-dark:            #2A1810;
  --c-gray-800:        #3D2B1F;
  --c-gray-600:        #7A6350;
  --c-gray-400:        #B09C87;
  --c-gray-200:        #E2DAD0;
  --c-gray-100:        #EDE8E0;
  --c-white:           #FDFCF9;

  /* Semânticos */
  --c-text:            var(--c-dark);
  --c-text-muted:      var(--c-gray-600);
  --c-text-light:      var(--c-gray-400);
  --c-border:          var(--c-gray-200);
  --c-border-subtle:   var(--c-gray-100);
  --c-surface:         var(--c-white);

  /* Semânticos de contraste */
  --c-text-on-dark:    var(--c-cream);
  --c-text-on-gold:    var(--c-dark);

  /* Estados */
  --c-success:         #2D6A4F;
  --c-error:           #9B2335;
  --c-warning:         #B7791F;

  /* ----------------------------------------------------------
     TIPOGRAFIA
  ---------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Scale — mobile first */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  5rem;       /* 80px */

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

  /* Line-heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* Letter-spacing */
  --ls-tight:   -0.03em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;
  --ls-widest:   0.2em;

  /* ----------------------------------------------------------
     ESPAÇAMENTO (escala de 4px)
  ---------------------------------------------------------- */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-7:   1.75rem;   /* 28px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-14:  3.5rem;    /* 56px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-32:  8rem;      /* 128px */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --max-w-xs:   480px;
  --max-w-sm:   640px;
  --max-w-md:   768px;
  --max-w-lg:   1024px;
  --max-w-xl:   1280px;
  --max-w-2xl:  1440px;
  --max-w-full: 100%;

  --container-px-mobile:  var(--sp-5);
  --container-px-tablet:  var(--sp-8);
  --container-px-desktop: var(--sp-12);

  /* Header */
  --header-h-mobile:   60px;
  --header-h-desktop:  80px;
  --announce-h:        38px;

  /* Sidebar */
  --sidebar-w-menu:    320px;
  --sidebar-w-cart:    400px;

  /* ----------------------------------------------------------
     BORDAS & RAIOS
  ---------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SOMBRAS — tonalizadas no vinho
  ---------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(74,14,22,0.06);
  --shadow-sm:   0 2px 8px rgba(74,14,22,0.08);
  --shadow-md:   0 4px 20px rgba(74,14,22,0.10);
  --shadow-lg:   0 8px 40px rgba(74,14,22,0.14);
  --shadow-xl:   0 20px 60px rgba(74,14,22,0.18);
  --shadow-gold: 0 4px 20px rgba(216,189,103,0.25);

  /* ----------------------------------------------------------
     TRANSIÇÕES
  ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
  --dur-drawer: 440ms;

  --t-fast:   var(--dur-fast) var(--ease-out);
  --t-base:   var(--dur-base) var(--ease-luxury);
  --t-slow:   var(--dur-slow) var(--ease-luxury);
  --t-drawer: var(--dur-drawer) var(--ease-out);

  /* ----------------------------------------------------------
     Z-INDEX
  ---------------------------------------------------------- */
  --z-neg:      -1;
  --z-base:      0;
  --z-above:     10;
  --z-dropdown:  50;
  --z-sticky:    100;
  --z-header:    110;
  --z-sidebar:   200;
  --z-overlay:   190;
  --z-modal:     300;
  --z-toast:     400;

  /* ----------------------------------------------------------
     INTERAÇÃO SEMÂNTICA
  ---------------------------------------------------------- */
  --focus-ring:        0 0 0 2px var(--c-gold);
  --focus-ring-offset: 2px;
  --disabled-opacity:  0.45;
  --hover-surface:     rgba(74,14,22,0.04);
  --overlay-dark:      rgba(28,15,10,0.52);

  /* ----------------------------------------------------------
     COMPONENTES ECOMMERCE
  ---------------------------------------------------------- */
  --btn-h-sm:           36px;
  --btn-h-base:         44px;
  --btn-h-lg:           52px;

  --card-radius:        var(--radius-sm);
  --product-img-ratio:  3 / 4;

  --card-px:            var(--sp-4);
  --card-py:            var(--sp-4);
  --card-gap:           var(--sp-3);
}

/* Desktop overrides */
@media (min-width: 1024px) {
  :root {
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
  }
}