/* DESIGN TOKENS - Açaí Boom */

:root {
  /* ── Cores Primárias (Roxo açaí) ── */
  --color-primary:          #6B21A8;
  --color-primary-hover:    #581C87;
  --color-primary-light:    #F3E8FF;
  --color-primary-dark:     #3B0764;
  --color-primary-rgb:      107, 33, 168;

  /* ── Cores de Destaque ── */
  --color-accent:           #EA1D2C;
  --color-accent-hover:     #C8101E;
  --color-accent-light:     #FFF1F2;

  /* ── Cores de Estado ── */
  --color-success:          #16A34A;
  --color-success-light:    #F0FDF4;
  --color-warning:          #F59E0B;
  --color-warning-light:    #FFFBEB;
  --color-error:            #DC2626;
  --color-error-light:      #FEF2F2;

  /* ── Neutros ── */
  --color-bg:               #FFFFFF;
  --color-bg-secondary:     #F8F8F8;
  --color-bg-tertiary:      #F1F1F1;
  --color-surface:          #FFFFFF;
  --color-surface-hover:    #F5F5F5;
  --color-border:           #E8E8E8;
  --color-border-light:     #F0F0F0;
  --color-divider:          #EEEEEE;

  /* ── Texto ── */
  --color-text:             #1A1A1A;
  --color-text-secondary:   #717171;
  --color-text-muted:       #A0A0A0;
  --color-text-inverse:     #FFFFFF;
  --color-text-price:       #1A1A1A;
  --color-text-old-price:   #A0A0A0;
  --color-text-discount:    #16A34A;

  /* ── Badges ── */
  --color-badge-hot:        #EA1D2C;
  --color-badge-popular:    #6B21A8;
  --color-badge-discount:   #16A34A;
  --color-badge-new:        #2563EB;

  /* ── Estrelas ── */
  --color-star:             #F59E0B;
  --color-star-empty:       #D1D5DB;

  /* ── Tipografia ── */
  --font-heading:           'StoreSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:              'StoreSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:                0.6875rem;  /* 11px */
  --text-sm:                0.8125rem;  /* 13px */
  --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:               1.75rem;    /* 28px */

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

  --leading-tight:          1.2;
  --leading-normal:         1.45;
  --leading-relaxed:        1.6;

  /* ── Espaçamentos ── */
  --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;

  /* ── Bordas ── */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-2xl:             24px;
  --radius-full:            9999px;

  /* ── Sombras ── */
  --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:              0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:              0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-top:             0 -2px 8px rgba(0, 0, 0, 0.08);

  /* ── Transições ── */
  --transition-fast:        150ms ease;
  --transition-base:        200ms ease;
  --transition-slow:        300ms ease-out;
  --transition-spring:      400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ── */
  --z-sticky:               100;
  --z-overlay:              200;
  --z-modal:                300;
  --z-cart-bar:             250;
  --z-toast:                400;

  /* ── Container ── */
  --container-max:          480px;
  --container-desktop:      1024px;
}