/*
 * הבית של הנשמה — design tokens
 * Approved 3–4.11.2026. Reference: design-system.html
 * Mobile = up to 639px, tablet = 640–1023px, desktop = 1024px and up.
 */

:root {
  /* ---------- Color: neutrals (~70% of the page) ---------- */
  --paper: #FBF9F5;        /* cards, light bands */
  --cream: #F3EEE7;        /* main background */
  --sand: #EAE2D7;         /* arch photo backdrop, hover on light surfaces */
  --stone: #D8CBBB;        /* dividers and borders only — never text */
  --muted: #6B645C;        /* secondary text, 5.05:1 on cream */
  --earth-soft: #5D554D;   /* secondary text on tinted backgrounds */
  --earth: #332F2A;        /* primary text, 11.5:1 on cream */

  /* ---------- Color: brand olive (~20%) ---------- */
  --olive: #69705D;        /* large headings and decoration only (4.46:1) */
  --olive-deep: #5A6150;   /* buttons, eyebrows, small text (6.13:1 with paper) */
  --olive-press: #4C5244;  /* button hover (7.69:1 with paper) */
  --olive-mist: #E3E5DA;   /* gift box, chips, secondary-button hover */

  /* ---------- Color: green surfaces (added 6.11.2026: more green, less pale) ---------- */
  --sage: #E6E9DF;         /* light bands that alternate with cream; --muted on it 4.74:1 */
  --forest: #4F5646;       /* one deep band per page, and the footer */
  --on-forest: #F3EEE7;    /* text on forest, 6.61:1 */
  --on-forest-soft: #D9DFCC; /* eyebrows, small text, rules and focus ring on forest, 5.59:1 */
  --on-forest-accent: #EBC9B4; /* key sentence and link hover on forest, 4.92:1 */

  /* ---------- Color: accent (~5%) ---------- */
  --accent: #9A5B40;       /* terracotta: emphasised words, step numbers, quote rules, link hover (4.61:1) */
  --accent-tint: #EFDFD5;  /* testimonials band; text on it uses --earth / --earth-soft, not --muted */
  --accent-marker: #EBD2C4; /* marker highlight: one step deeper than the tint so it reads on cream too */

  /* ---------- Color: semantic aliases ---------- */
  --color-bg: var(--cream);
  --color-surface: var(--paper);
  --color-text: var(--earth);
  --color-text-secondary: var(--muted);
  --color-border: var(--stone);
  --color-hairline: rgba(51, 47, 42, .12);
  --color-action: var(--olive-deep);
  --color-action-hover: var(--olive-press);
  --color-emphasis: var(--accent);
  --color-focus: var(--olive);

  /* ---------- Typography ---------- */
  --font-heading: "Noto Serif Hebrew", Georgia, "Times New Roman", serif;
  --font-body: Heebo, "Segoe UI", Arial, sans-serif;
  --weight-heading: 500;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  /* Scale: body 18 × ratio 1.25 (desktop) */
  --fs-h1: 49px;      /* hero */
  --fs-h2: 35px;      /* section headings */
  --fs-quote: 31px;   /* key sentences, signature line */
  --fs-h3: 28px;      /* service card titles */
  --fs-h4: 23px;      /* FAQ questions, sub-headings, wordmark */
  --fs-lead: 20px;    /* opening paragraph */
  --fs-body: 18px;
  --fs-small: 15px;   /* price, location, notes */
  --fs-eyebrow: 13px;

  --lh-body: 1.75;
  --lh-lead: 1.65;
  --lh-heading: 1.28;
  --lh-display: 1.2;
  --tracking-heading: -.01em;  /* never tighter in Hebrew */
  --tracking-eyebrow: .05em;   /* Hebrew maximum */

  /* ---------- Spacing ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* Rhythm: balanced */
  --section-y: var(--s9);       /* 96 between bands */
  --head-gap: 40px;             /* section heading → content */

  /* Layout */
  --container: 1180px;
  --measure: 36em;              /* ~65 characters */
  --gutter: var(--s7);          /* 48 desktop */
  --tap-min: 48px;

  /* ---------- Shape & depth ---------- */
  --r-btn: 8px;
  --r-card: 16px;
  --r-img: 20px;
  --r-pill: 999px;
  --r-arch: 999px 999px var(--r-btn) var(--r-btn);  /* Talia's photos only */
  --border-card: 1px solid rgba(51, 47, 42, .06);
  --border-divider: 1px solid var(--stone);
  --shadow: 0 1px 2px rgba(51, 47, 42, .04), 0 12px 32px rgba(51, 47, 42, .08);  /* the only shadow */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-hover: 150ms;
  --dur-reveal: 600ms;
  --reveal-distance: 14px;
  --reveal-stagger: 90ms;

  /* ---------- Layers ---------- */
  --z-nav: 20;
  --z-drawer: 40;
  --z-bubble: 30;

  /* ---------- Floating WhatsApp bubble ---------- */
  --bubble-size: 56px;
}

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --gutter: var(--s6);   /* 32 */
  }
}

/* Mobile */
@media (max-width: 639px) {
  :root {
    --fs-h1: 35px;
    --fs-h2: 29px;
    --fs-quote: 27px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-lead: 19px;
    --fs-body: 17px;
    --fs-small: 14px;
    --fs-eyebrow: 13px;
    --lh-body: 1.7;

    --section-y: var(--s8);  /* 64 */
    --head-gap: var(--s5);   /* 24 */
    --gutter: 20px;
  }
}