/**
 * File: global-variables.css
 * Purpose: Define root-level CSS variables for site-wide use
 * Usage: Applied globally via `:root` selector; used across all theme components
 *
 * Affects:
 *   – Base color palette and overlays
 *   – Brand identity and accent coloring
 *   – Buttons, form inputs, and pricing styles
 *   – Inventory status color indicators
 *
 * Notes:
 *   – Keeps all commonly reused values in one centralized location
 *   – Enables consistent theming and easy overrides per scope
 *   – Grouped into clear categories for maintainability
 */


:root {
  /* ====================== */
  /* ==== SITE PALETTE ==== */
  /* ====================== */

    --white: #fff;
    --white-trans-low:          rgba(255,255,255,0.6);

    --black: #000;
    --black-trans-highest:      rgba(0, 0, 0, 0.1);

    --tan-lightest: #f1e1d5;
    --tan-lightest-trans-mid:   rgba(243, 227, 216, 0.5);
    --tan-lighter:  #f3e3d8;
    --tan-medium:   #d4c0ad;

    --brown-medium: #5e3e30;
    --brown-medium-trans-none:  rgba(94, 62, 48, 1);
    --brown-medium-trans-lower: rgba(94, 62, 48, 0.8);
    --brown-dark:   #4a3b33;
    --brown-darker-trans-higher: rgba(63, 41, 30, 0.83);

    --brand-orange-light:      #ee812c;
    --brand-orange-medium:     #d96103;
    --brand-orange-dark:       #b55b26;
    
    --brand-yellow:            #f1ad2a;
    --brand-yellow-trans-none: rgba(241, 173, 42, 1);
    --brand-yellow-trans-full: rgba(241, 173, 42, 0);



  /* =============================== */
  /* ==== STOCK COLOR VARIABLES ==== */
  /* =============================== */

    --in-stock-color: #006600; /* green */
    --backorder-color: #d78700; /* orange */
    --out-of-stock-color: #d50000; /* red */



  /* ====================== */
  /* ==== BRAND ASSETS ==== */
  /* ====================== */

    --brand-accent-color-light: var(--brand-orange-light);
    --brand-accent-color: var(--brand-orange-medium);
    --brand-accent-color-dark: var(--brand-orange-dark);
    --brand-accent-color-secondary:var(--brand-yellow);


  /* =============================== */
  /* ==== GLOBAL THEME ELEMENTS ==== */
  /* =============================== */

    /* Set Button Color Variables */
      --global-button-bg-color: var(--tan-lighter);
      --global-button-bg-hover-color: var(--white);
      --global-button-border-color: var(--tan-medium);
      --global-button-border-hover-color: var(--tan-medium);
      --global-button-font-color: var(--brown-dark);
      --global-button-font-hover-color: var(--brand-orange-medium);

    /* Set Form Input Color Variables */
      --global-form-input-border-color: var(--tan-medium);
      --global-form-input-border-hover-color: var(--tan-medium);
      --global-form-input-border-focus-color: var(--tan-medium);
      --global-form-input-bg-color: var(--tan-lighter);
      --global-form-input-bg-hover-color: var(--white);
      --global-form-input-bg-focus-color: var(--white);
      --global-form-input-font-color: var(--brown-dark);
      --global-form-input-font-hover-color: var(--brown-dark);
      --global-form-input-font-focus-color: var(--brown-dark);

    /* Set Product Price Color Variables */
      --global-regular-price-font-color: var(--gray-dark);
      --global-sale-price-font-color: var(--brown-dark);

      /* ------ General Colors -------------- */
    --general-span-accent-color: var(--brand-orange-medium);
    --general-link-hover-color: var(--brand-orange-medium);
    --general-product-link-hover: var(--brand-orange-medium);

}