/* ============================================================
   Beahava (מרכז באהבה · הבית ביפו) — design tokens
   Generated by brand-kit-builder on 2026-10-16, via extraction
   from the approved black-and-gold sketch (Claude Design canvas,
   30.9.2026) plus derived roles marked "derived".

   This file is the source of truth. theme.json and the Elementor
   globals are derived from it. Change a value here first, then
   regenerate the others.

   Naming is by ROLE, never by hue.
   The site is dark-first: --color-surface is near-black and
   --color-ink is a warm cream.

   Enqueue this before any other stylesheet.
   ============================================================ */

:root {
  /* --- Brand -------------------------------------------------- */
  --color-brand:            #C9A24A;  /* gold: fills, primary buttons, rules */
  --color-brand-deep:       #E6C97A;  /* light gold: links and any text set in gold on dark */
  --color-brand-hover:      #D9B660;  /* derived: primary button hover */
  --color-brand-tint:       #2A2316;  /* derived: soft gold-on-black fill, badges */
  --color-on-brand:         #0F0E0C;
  --color-on-brand-deep:    #0F0E0C;

  --color-secondary:        #5B5347;  /* stone: secondary button border, strong rules */
  --color-secondary-hover:  #756B5B;  /* derived */
  --color-secondary-tint:   #1F1B16;
  --color-on-secondary:     #F2EAD8;

  --color-accent:           #E6C97A;  /* same as brand-deep; pops only, never a fill */
  --color-on-accent:        #0F0E0C;

  /* --- Ink ---------------------------------------------------- */
  --color-ink:              #F2EAD8;  /* body and headings, cream on black */
  --color-ink-muted:        #A89F8C;  /* captions, meta, secondary copy */
  --color-ink-faint:        #6F6656;  /* placeholders and image captions only, never body */
  --color-ink-on-dark:      #F2EAD8;
  --color-ink-on-dark-muted:#A89F8C;
  --color-ink-on-light:     #0F0E0C;  /* derived: text on the rare inverse (cream) panel */

  /* --- Surface ------------------------------------------------ */
  --color-surface:          #0F0E0C;  /* page */
  --color-surface-raised:   #1F1B16;  /* cards, image placeholders, inputs on subtle */
  --color-surface-subtle:   #151310;  /* alternating sections, event cards */
  --color-surface-inverse:  #F2EAD8;  /* derived: light panel (receipts, print, LearnDash content) */

  /* --- Line --------------------------------------------------- */
  --color-line:             #2A2622;  /* hairline dividers, card borders (decorative) */
  --color-line-strong:      #756B5B;  /* input and secondary-button borders (needs 3:1) */
  --color-focus:            #E6C97A;

  /* --- Status (derived, tuned for a dark page) ----------------- */
  --color-success:          #8CC084;
  --color-warning:          #E3A94B;
  --color-error:            #E8806E;
  --color-info:             #8DB4DC;

  /* --- Disabled ----------------------------------------------- */
  --color-disabled-bg:      #1F1B16;
  --color-disabled-ink:     #6F6656;

  /* --- Type --------------------------------------------------- */
  /* Heebo is the only family on the site. Hierarchy comes from size,
     weight (300 body, 500 headings) and space, never from a second face. */
  --font-display: "Heebo", "Assistant", "Noto Sans Hebrew", Arial, sans-serif;  /* one family: Heebo only (client decision 5.11.2026) */
  --font-body:    "Heebo", "Assistant", "Noto Sans Hebrew", Arial, sans-serif;
  --font-utility: "Heebo", "Assistant", "Noto Sans Hebrew", Arial, sans-serif;

  --text-2xs:  0.75rem;    /* 12 */
  --text-xs:   0.8125rem;  /* 13: eyebrows */
  --text-sm:   0.9375rem;  /* 15: meta, buttons small */
  --text-base: 1.0625rem;  /* 17 mobile body */
  --text-lg:   1.125rem;   /* 18 desktop body */
  --text-xl:   1.375rem;   /* 22: card titles mobile */
  --text-2xl:  clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);   /* 22 → 28: card titles */
  --text-3xl:  clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);     /* 28 → 40: h2 */
  --text-4xl:  clamp(2rem, 1.4rem + 2.2vw, 2.875rem);      /* 32 → 46 */
  --text-5xl:  clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);    /* 36 → 60: h1 */

  --leading-display: 1.18;
  --leading-body:    1.6;
  --tracking-display: normal;
  --tracking-eyebrow: 0.16em;

  --weight-body:    300;
  --weight-medium:  500;
  --weight-display: 500;

  /* --- Space -------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-section: clamp(3.5rem, 2rem + 5vw, 6rem);
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 4rem);  /* 20 mobile → 64 desktop */
  --measure: 40rem;
  --container: 82rem;      /* 1312 = 1440 − 2 × 64 */

  /* --- Shape and depth ---------------------------------------- */
  /* Sharp corners are part of the identity: stone, not plastic. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* --- Motion ------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);

  /* --- Touch -------------------------------------------------- */
  --tap-min: 44px;
}

html:not([dir]) { direction: rtl; }

body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-surface);
  text-align: start;
}
@media (min-width: 1024px) { body { font-size: var(--text-lg); } }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .display { letter-spacing: normal; }

td, th, dd, li, blockquote { unicode-bidi: plaintext; }
code, kbd, samp, .ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
[lang="en"] { font-family: var(--font-body); }

p { max-inline-size: var(--measure); }

a { color: var(--color-brand-deep); }
a:hover { color: var(--color-ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Signature
   קו הסף (The Threshold Line): one gold hairline that marks
   where something begins, like the stone sill of an old Jaffa
   doorway. It appears as (1) a 36px rule before an eyebrow,
   (2) a 2px gold top edge on event cards, (3) the gold ◆ that
   replaces list bullets. Nowhere else: no gold boxes, no gold
   gradients, no gold text blocks.
   ============================================================ */

.bh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-utility);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-brand);
}
.bh-eyebrow::before {
  content: "";
  inline-size: 36px;
  block-size: 1px;
  background: var(--color-brand);
}
.bh-sill { border-block-start: 2px solid var(--color-brand); }
.bh-list { list-style: none; padding: 0; margin: 0; }
.bh-list > li { display: flex; gap: 0.75rem; align-items: baseline; }
.bh-list > li::before { content: "◆"; color: var(--color-brand); font-size: 0.75em; }