/* ==========================================================================
   קאזאלינגו · Design Tokens
   Single source of truth for the WordPress/WooCommerce theme.
   Load first (before woocommerce.css / any component CSS).
   ========================================================================== */

:root {
  /* ---- Brand palette (from assets/logo/gallery.html) ---- */
  --cl-olive:            #6B7C32;
  --cl-terracotta:       #C65D3C;
  --cl-saffron:          #E8B23A;
  --cl-ink:              #3A2E22;
  --cl-cream:            #FBF6EE;

  /* ---- Extended tints & shades ---- */
  --cl-olive-dark:       #55632A;
  --cl-terracotta-dark:  #8C3D22;   /* hover state of terracotta */
  --cl-saffron-light:    #F7E3B4;   /* soft highlight, table stripes */
  --cl-cream-2:          #F3E9D7;   /* borders, dividers, soft fills */
  --cl-ink-soft:         #7A6F5E;   /* muted/secondary text */
  --cl-ink-faint:        #8A7D6A;   /* captions, placeholders */
  --cl-white:            #FFFFFF;

  /* ---- Semantic roles ---- */
  --color-bg:            var(--cl-cream);       /* page background */
  --color-surface:       var(--cl-white);       /* cards, panels */
  --color-text:          var(--cl-ink);
  --color-text-muted:    var(--cl-ink-soft);
  --color-heading:       var(--cl-ink);
  --color-primary:       var(--cl-terracotta);  /* CTAs, add-to-cart */
  --color-primary-hover: var(--cl-terracotta-dark);
  --color-secondary:     var(--cl-olive);       /* secondary actions, links */
  --color-secondary-hover: var(--cl-olive-dark);
  --color-accent:        var(--cl-saffron);     /* badges, ratings, highlights */
  --color-border:        var(--cl-cream-2);
  --color-success:       var(--cl-olive);
  --color-error:         #A0341F;
  --color-warning:       var(--cl-saffron);
  --color-sale:          var(--cl-saffron);     /* onsale badge bg */
  --color-sale-text:     var(--cl-ink);

  /* ---- Typography ---- */
  --font-heading: 'Frank Ruhl Libre', 'David Libre', serif;
  --font-body:    'Rubik', 'Arial Hebrew', sans-serif;

  --fs-hero:  clamp(2.75rem, 6vw, 4rem);   /* 44–64px  hero/display   */
  --fs-h1:    2.5rem;                      /* 40px                    */
  --fs-h2:    2rem;                        /* 32px                    */
  --fs-h3:    1.5625rem;                   /* 25px                    */
  --fs-h4:    1.25rem;                     /* 20px                    */
  --fs-body:  1.0625rem;                   /* 17px — Hebrew body      */
  --fs-small: 0.9375rem;                   /* 15px                    */
  --fs-xs:    0.8125rem;                   /* 13px — captions, meta   */

  --fw-heading:      900;   /* matches the logo wordmark weight */
  --fw-heading-sub:  700;
  --fw-body:         400;
  --fw-body-medium:  500;

  --lh-heading: 1.2;
  --lh-body:    1.7;    /* generous — Hebrew readability */

  /* ---- Spacing (4px base) ---- */
  --sp-1:  0.25rem;   /*   4px */
  --sp-2:  0.5rem;    /*   8px */
  --sp-3:  0.75rem;   /*  12px */
  --sp-4:  1rem;      /*  16px */
  --sp-6:  1.5rem;    /*  24px */
  --sp-8:  2rem;      /*  32px */
  --sp-12: 3rem;      /*  48px */
  --sp-16: 4rem;      /*  64px */
  --sp-24: 6rem;      /*  96px */

  /* ---- Radii ---- */
  --radius-sm:   6px;    /* inputs, small chips  */
  --radius-md:   10px;   /* buttons, notices     */
  --radius-lg:   16px;   /* cards, panels        */
  --radius-pill: 999px;  /* badges, tags         */

  /* ---- Shadows (warm, ink-tinted — never gray/blue) ---- */
  --shadow-sm: 0 2px 8px  rgba(58, 46, 34, 0.05);
  --shadow-md: 0 4px 20px rgba(58, 46, 34, 0.06);
  --shadow-lg: 0 10px 32px rgba(58, 46, 34, 0.10);

  /* ---- Layout ---- */
  --content-width: 1140px;
  --content-narrow: 720px;

  /* ---- Transitions ---- */
  --ease: 180ms ease;
}

/* ---- Base element defaults (opt-in by loading this file) ---- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-heading); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-heading-sub); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-heading-sub); }

a { color: var(--color-secondary); transition: color var(--ease); }
a:hover { color: var(--color-secondary-hover); }