/* ======================================
   ARAUMA — CSS VARIABLES
   Single source of truth for all custom properties.
   Loaded first — all other stylesheets depend on this.
   ====================================== */

:root {

  /* ---- Brand Colors ---- */
  --arauma-green:              #0E8272;
  --arauma-green-hover:        #0b6d60;
  --arauma-gold:                    #C7A14A;
  --arauma-gold-hover:              #b6923e;
  --arauma-gold-border-soft:        rgba(199, 161, 74, 0.45);
  --arauma-gold-border-soft-hover:  rgba(199, 161, 74, 0.55);
  --arauma-gold-bg-soft:            rgba(199, 161, 74, 0.08);
  --arauma-green-active-bg:         rgba(14, 130, 114, 0.05);
  --arauma-overlay-bg:              rgba(0, 0, 0, 0.28);
  --arauma-border-divider:          #ececec;
  --arauma-white:              #ffffff;

  /* ---- Text ---- */
  --arauma-text-dark:          #111111;
  --arauma-text-near-black:    #1c1c1c;
  --arauma-text-price:         #222222;
  --arauma-text-del:           #6a6a6a;
  --arauma-text-body:          #4d4d4d;
  --arauma-text-muted:         #777777;

  /* ---- Backgrounds ---- */
  --arauma-bg-soft:            #f6f6f4; 

  /* ---- Typography ---- */
  --arauma-font:               'Jost', sans-serif;

  /* ---- Transitions ---- */
  --arauma-transition:         0.25s ease;

  /* ---- Borders & Radius ---- */
  --arauma-radius-sm:          2px;
  --arauma-border-muted:       #e8e8e4;
  --arauma-border-soft-2:      #efefef;
  --arauma-border-input:       #dddddd;
  --arauma-border-control:     #cfcfcf;
  --arauma-border-green-soft:  rgba(14, 130, 114, 0.2);

  /* ---- Shadows ---- */
  --arauma-shadow-sm:          0 2px 6px rgba(0, 0, 0, 0.04);
  --arauma-shadow-md:          0 8px 24px rgba(0, 0, 0, 0.06);

  /* ---- Radius ---- */
  --arauma-radius-md:          4px;
  --arauma-radius-lg:          10px;
  --arauma-radius-pill:        999px;

  /* ---- Extended Text ---- */
  --arauma-text-soft:          #8a8a8a;
  --arauma-text-light:         #7d7d7d;

  /* ---- Layout ---- */
  --arauma-control-height:     48px;
  --arauma-qty-width:          34px;
  --arauma-thumb-width:        74px;

  /* ---- Buttons ---- */
  --arauma-btn-primary:              var(--arauma-green);
  --arauma-btn-primary-hover:        var(--arauma-green-hover);
  --arauma-btn-secondary-bg:         #f6f6f4;
  --arauma-btn-secondary-border:     #e8e8e4;
  --arauma-btn-secondary-hover:      #efefeb;
  --arauma-btn-secondary-border-hover: #dfdfda;
  --arauma-btn-gold:                 var(--arauma-gold);
  --arauma-btn-text-light:           var(--arauma-white);
  --arauma-btn-text-dark:            #1b1b1b;
  --arauma-btn-font:                 var(--arauma-font);
  --arauma-btn-height:               var(--arauma-control-height);
  --arauma-btn-radius:               var(--arauma-radius-sm);
  --arauma-btn-padding-x:            28px;
  --arauma-btn-font-size:            14px;
  --arauma-btn-font-weight:          500;
  --arauma-btn-letter-spacing:       0.02em;
  --arauma-btn-transition:           0.18s ease;

  /* ---- Header / Menu ---- */
  --menu-bg-solid:             #FFFFFF;
  --menu-border:               rgba(0,0,0,0.08);
  --menu-text-dark:            #0E0E0E;
  --menu-text-light:           #FFFFFF;
  --menu-brand-color:          var(--arauma-green);
  --menu-transition-desktop:   0.25s ease;
  --menu-transition-mobile:    0s ease;
  --menu-icon-bars:            url("/wp-content/uploads/2026/02/bars-solid-full.svg");
  --menu-icon-close:           url("/wp-content/uploads/2026/02/xmark-solid-full.svg");
  --menu-icon-size:            24px;

  /* ---- Newsletter ---- */
  --arauma-newsletter-max-width:          500px;
  --arauma-newsletter-gap:                10px;
  --arauma-newsletter-btn-width:          165px;
  --arauma-newsletter-input-border:       rgba(255,255,255,0.25);
  --arauma-newsletter-input-border-hover: rgba(255,255,255,0.35);
  --arauma-newsletter-input-border-focus: rgba(199,161,74,0.6);
  --arauma-newsletter-input-bg:           rgba(255,255,255,0.06);
  --arauma-newsletter-input-bg-focus:     rgba(255,255,255,0.08);
  --arauma-newsletter-placeholder:        rgba(255,255,255,0.65);

}