:root {

  --c-burgundy:        #B56576;
  --c-burgundy-light:  #CD8A98;
  --c-burgundy-dark:   #8E4E5D;

  --c-cream:           #FBF2F3;
  --c-cream-light:     #FFFFFF;
  --c-cream-dark:      #F4E3E6;

  --c-bg:              #FDFAFB;
  --c-bg-warm:         #FAF1F2;

  --c-gold:            #C99A63;
  --c-gold-light:      #E7CFA6;
  --c-gold-dark:       #AE8449;
  --c-gold-muted:      #D6B888;

  --c-ink:             #2C2126;
  --c-dark:            #43333A;
  --c-gray-800:        #5A464F;
  --c-gray-600:        #8B7178;
  --c-gray-400:        #C2ABB1;
  --c-gray-200:        #EEE3E6;
  --c-gray-100:        #F8F1F3;
  --c-white:           #FFFFFF;

  --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);

  --c-text-on-dark:    var(--c-cream);
  --c-text-on-gold:    var(--c-dark);

  --c-success:         #4C9A78;
  --c-error:           #D6567A;
  --c-warning:         #C9954A;

  --font-display: 'Jost', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-sidebar: 'Jost', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --text-2xs:  0.625rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;
  --text-6xl:  5rem;

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

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --ls-tight:   -0.03em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;
  --ls-widest:   0.2em;

  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-7:   1.75rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-14:  3.5rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  --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-h-mobile:   60px;
  --header-h-desktop:  80px;
  --announce-h:        38px;

  --sidebar-w-menu:    320px;
  --sidebar-w-cart:    400px;

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --shadow-xs:   0 1px 2px rgba(120,80,160,0.06);
  --shadow-sm:   0 2px 8px rgba(120,80,160,0.09);
  --shadow-md:   0 4px 20px rgba(120,80,160,0.12);
  --shadow-lg:   0 8px 40px rgba(120,80,160,0.16);
  --shadow-xl:   0 20px 60px rgba(120,80,160,0.20);
  --shadow-gold: 0 4px 20px rgba(201, 154, 99,0.30);

  --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-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;

  --focus-ring:        0 0 0 2px var(--c-gold);
  --focus-ring-offset: 2px;
  --disabled-opacity:  0.45;
  --hover-surface:     rgba(181, 101, 118,0.06);
  --overlay-dark:      rgba(58,44,70,0.52);

  --btn-h-sm:           36px;
  --btn-h-base:         44px;
  --btn-h-lg:           52px;

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

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

@media (min-width: 1024px) {
  :root {
    --text-base: 1rem;
    --text-md:   1.125rem;
  }
}