:root {
  /* Colours — houseofestila.com design system */
  --background:       #FFFFFF;
  --background-warm:  #F0EBE7;
  --surface:          #F0EBE7;
  --surface-dark:     #E4E4E1;
  --ink:              #000000;
  --ink-charcoal:     var(--ink);
  --ink-deep:         #191A38;
  --ink-navy:         var(--ink-deep);
  --ink-soft:         #484141;
  --ink-faint:        var(--ink-soft);
  --gold:             #BF9F5A;
  --gold-hover:       #A88A4A;
  --gold-light:       #D4BA8E;
  --color-gold-light: #D4B87A; /* CTA hover gold (warmer than --gold-light) */
  --border:           #E4E4E1;
  --border-warm:      #E4E4E1;
  --white:            #FFFFFF;

  /* Fonts — houseofestila.com: Abhaya Libre + Lora + Helvetica */
  --font-display:     'Abhaya Libre', Georgia, 'Times New Roman', serif;
  --font-body:        'Lora', Georgia, serif;
  --font-ui:          'Helvetica', Arial, sans-serif;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --max-width:           1400px;
  --content-width:       860px;
  --header-height:       90px;
  --library-bar-height:  72px;

  /* Animation */
  --ease:          cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration:      0.4s;
  --duration-slow: 0.8s;
  --duration-glacial: 1.4s;

  /* Z-index */
  --z-base:        1;
  --z-library-bar: 999;
  --z-header:      1000;
  --z-drawer:      1100;

  /* Typography scale — rem values matching existing theme conventions */
  --font-size-2xs:  0.6875rem;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-md:   1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;

  /* Letter-spacing scale */
  --tracking-tight: 0.05em;
  --tracking-wide:  0.1em;

  /* Line heights */
  --line-height-tight: 1.3;

  /* Borders & widths */
  --border-width:      1px;
  --border-width-lg:   2px;

  /* Component sizing — shared across theme */
  --swatch-size-sm: 3.25rem;
  --swatch-size-md: 3.5rem;
  --qty-btn-size:   2.25rem;
  --qty-input-width: 2.5rem;
  --form-max-width: 30rem;
  --drawer-width:   28.75rem;
  --overlay-colour: rgb(0 0 0 / 0.4);

  /* Status colours */
  --ink-error: var(--gold-hover);
}