/* BacWater-Uray03 (Vela cosmetic03) bridge tokens.
 *
 * Maps the Vela cosmetic03 theme's CSS variable surface onto the
 * BacWater clinical-research palette + typography. Loaded BEFORE
 * the Vela site CSS so every var(--vela-*) selector inside the theme
 * picks up BacWater's values instead of Vela's pink-on-white defaults.
 *
 * Brand register: clinical / research-tool / minimal-clean / utilitarian.
 * Reads like a laboratory-supply website (cool tech blue, sparse type,
 * near-black on off-white) — NOT cosmetic, NOT gym, NOT surf.
 *
 * Variable surface lifted from:
 *   themeforest UrayThemes/cosmetic03/snippets/css-variables.liquid
 */

:root {
  /* Brand palette --------------------------------------------------- */
  --vela-color-primary:    #0d4f7a;        /* Deep tech blue — primary CTA, links */
  --vela-color-secondary:  #7ec3df;        /* Lab-tech blue — accents, hover */
  --vela-color-borders:    #d8dfe6;        /* Cool gray-blue divider */
  --vela-color-background: #fafbfc;        /* Clean off-white */

  --vela-text-color-primary:   #2a3441;    /* Charcoal slate */
  --vela-text-color-secondary: #0d1521;    /* Near-black (headings) */
  --vela-text-color-banner:    #5b6776;    /* Muted slate (banner copy) */

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

  /* Typography — BacWater clinical register: Inter body + IBM Plex Sans
   * for headings (utilitarian-technical pair). Both loaded by vela-site.css
   * @import; Inter is also pre-linked from layouts/bacwater.html.erb. */
  --vela-font-family:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vela-font-family-secondary: "IBM Plex Sans", "Inter", sans-serif;
  --vela-font-icon:             "FontAwesome";
  --vela-font-size:             15px;
  --vela-heading-size:          44px;
  --vela-heading-color:         var(--vela-text-color-secondary);

  /* Topbar — dark slate per clinical register */
  --vela-topbar-bgcolor:   #0d1521;
  --vela-topbar-textcolor: #fafbfc;

  /* Header — clean off-white with near-black text */
  --vela-header-bgcolor:   #fafbfc;
  --vela-header-textcolor: #0d1521;

  /* Footer — dark slate matching topbar; titles white, body muted */
  --vela-footer-bgcolor:    #0d1521;
  --vela-footer-titlecolor: #ffffff;
  --vela-footer-textcolor:  #9aa6b3;

  /* Breadcrumb mirrors body */
  --vela-breadcrumb-bgcolor:      #f3f5f8;
  --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/bacwater/uray03/title_bg.png);
  --title_bg_small:  url(/assets/bacwater/uray03/title_bg_small.png);
  --title_bg_white:  url(/assets/bacwater/uray03/title_bg_white.png);
  --title_bg_ssmal:  url(/assets/bacwater/uray03/title_bg_ssmal.png);
  --item_deal:       url(/assets/bacwater/uray03/item_deal.png);
  --icon_loading:    url(/assets/bacwater/uray03/loading.gif);
  --icon_close:      url(/assets/bacwater/uray03/velaClose.png);

  /* Primary CTA button — deep tech blue with darker hover */
  --button_one_txtcolor:           #ffffff;
  --button_one_bgcolor:            #0d4f7a;
  --button_one_bordercolor:        #0d4f7a;
  --button_one_bgcolor_hover:      #0d1521;
  --button_one_bordercolor_hover:  #0d1521;
  --button_one_txtcolor_hover:     #ffffff;

  /* Product PDP secondary button — outlined slate */
  --btnpro_txtcolor:           #0d1521;
  --btnpro_bgcolor:            #ffffff;
  --btnpro_bordercolor:        #0d1521;
  --btnpro_bgcolor_hover:      #0d1521;
  --btnpro_bordercolor_hover:  #0d1521;
  --btnpro_txtcolor_hover:     #ffffff;

  /* Add-to-cart button — primary tech blue, slate hover */
  --addtocart_txtcolor:           #ffffff;
  --addtocart_bgcolor:            #0d4f7a;
  --addtocart_bordercolor:        #0d4f7a;
  --addtocart_txtcolor_hover:     #ffffff;
  --addtocart_bgcolor_hover:      #0d1521;
  --addtocart_bordercolor_hover:  #0d1521;

  /* Main nav — off-white background, near-black links, tech-blue hover */
  --velamenu-bgcolor:            #fafbfc;
  --velamenu-linkcolor:          #0d1521;
  --velamenu-linkcolor-hover:    var(--vela-color-primary);
  --velamenu-fontsize:           14px;
  --velasubmenu-bgcolor:         #ffffff;
  --velasubmenu-linkcolor:       #2a3441;
  --velasubmenu-linkcolor-hover: var(--vela-color-primary);
  --velasubmenu-fontsize:        13px;
}