/* Glam-Uray02 (Vela) bridge tokens.
 *
 * Maps the Vela cosmetic02 theme's CSS variable surface to GlamPeptides'
 * brand brief palette + typography. Loaded BEFORE the Vela site CSS so
 * every var(--vela-*) selector inside the theme picks up Glam's values
 * instead of Vela's pink-on-white defaults.
 *
 * Brief reference:
 *   Dropbox/Entities/StableResearch/Brands/GLAMPeptides/WIP/DesignBriefs/Web/GlamPeptides_Website_Brief.pdf
 *
 * Variable surface lifted from:
 *   themeforest-S4TBKau8-uray-cosmetic-beauty/cosmetic02/snippets/css-variables.liquid
 */

:root {
  /* Brand palette --------------------------------------------------- */
  --vela-color-primary:    #B76E79;        /* Rose Gold */
  --vela-color-secondary:  #D4AF76;        /* Champagne Gold */
  --vela-color-borders:    #E8D5CE;        /* Soft blush */
  --vela-color-background: #FBF7F2;        /* Warm cream */

  --vela-text-color-primary:   #2C2018;    /* Deep espresso */
  --vela-text-color-secondary: #0D0D0D;    /* Matte black (headings) */
  --vela-text-color-banner:    #A3A3A3;    /* Warm gray (banner copy) */

  --vela-border-main:   1px solid var(--vela-color-borders);
  --vela-gutter-width:  30px;

  /* Typography — Glam brief §1.2 */
  --vela-font-family:           "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --vela-font-family-secondary: "Playfair Display", Georgia, serif;
  --vela-font-icon:             "FontAwesome";
  --vela-font-size:             15px;
  --vela-heading-size:          48px;
  --vela-heading-color:         var(--vela-text-color-secondary);

  /* Topbar — dark per brief §2.1 announcement-bar */
  --vela-topbar-bgcolor:   #0D0D0D;
  --vela-topbar-textcolor: #FBF7F2;

  /* Header — light cream with deep espresso text matches brief §2.2
   * top-of-page (cream) section. */
  --vela-header-bgcolor:   #FBF7F2;
  --vela-header-textcolor: #0D0D0D;

  /* Footer — dark per brief §2.2 footer DARK requirement */
  --vela-footer-bgcolor:    #0D0D0D;
  --vela-footer-titlecolor: #FFFFFF;
  --vela-footer-textcolor:  #A3A3A3;

  /* Breadcrumb mirrors body */
  --vela-breadcrumb-bgcolor:      #FBF7F2;
  --vela-breadcrumb-headingcolor: var(--vela-text-color-secondary);
  --vela-breadcrumb-linkcolor:    var(--vela-text-color-secondary);
  --vela-breadcrumb-textcolor:    var(--vela-color-primary);

  /* Decorative asset URLs */
  --title_bg:        url(/assets/glam/uray02/title_bg.png);
  --title_bg_small:  url(/assets/glam/uray02/title_bg_small.png);
  --title_bg_white:  url(/assets/glam/uray02/title_bg_white.png);
  --title_bg_ssmal:  url(/assets/glam/uray02/title_bg_ssmal.png);
  --item_deal:       url(/assets/glam/uray02/item_deal.png);
  --icon_loading:    url(/assets/glam/uray02/loading.gif);
  --icon_close:      url(/assets/glam/uray02/velaClose.png);

  /* Primary CTA button — luxury matte black with rose-gold hover */
  --button_one_txtcolor:           #FFFFFF;
  --button_one_bgcolor:            #0D0D0D;
  --button_one_bordercolor:        #0D0D0D;
  --button_one_bgcolor_hover:      var(--vela-color-primary);
  --button_one_bordercolor_hover:  var(--vela-color-primary);
  --button_one_txtcolor_hover:     #FFFFFF;

  /* Product PDP secondary button */
  --btnpro_txtcolor:           #2C2018;
  --btnpro_bgcolor:            #FBF7F2;
  --btnpro_bordercolor:        #2C2018;
  --btnpro_bgcolor_hover:      #2C2018;
  --btnpro_bordercolor_hover:  #2C2018;
  --btnpro_txtcolor_hover:     #FFFFFF;

  /* Add-to-cart button — primary CTA on PDP */
  --addtocart_txtcolor:           #FFFFFF;
  --addtocart_bgcolor:            #0D0D0D;
  --addtocart_bordercolor:        #0D0D0D;
  --addtocart_txtcolor_hover:     #0D0D0D;
  --addtocart_bgcolor_hover:      var(--vela-color-primary);
  --addtocart_bordercolor_hover:  var(--vela-color-primary);

  /* Main nav — cream background, espresso links, rose-gold hover */
  --velamenu-bgcolor:            #FBF7F2;
  --velamenu-linkcolor:          #0D0D0D;
  --velamenu-linkcolor-hover:    var(--vela-color-primary);
  --velamenu-fontsize:           14px;
  --velasubmenu-bgcolor:         #FFFFFF;
  --velasubmenu-linkcolor:       #2C2018;
  --velasubmenu-linkcolor-hover: var(--vela-color-primary);
  --velasubmenu-fontsize:        13px;
}