/* ============================================================
   WSC (Web Site Care) — design tokens
   Generated by brand-kit-builder on 2026-09-02.

   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 blue will be replaced one
   day; --color-brand will still be the right name.

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

:root {
  /* --- Brand -------------------------------------------------- */
  --color-brand:            #3E74B9;      /* fills and graphics */
  --color-brand-deep:       #325D94; /* links, buttons, anything carrying text */
  --color-brand-hover:      #3766A3;
  --color-brand-tint:       #E8EEF7;
  --color-brand-sky:        #87C6E7; /* logo globe; illustration and charts only, never text */
  --color-on-brand:         #FFFFFF;
  --color-on-brand-deep:    #FFFFFF;

  --color-secondary:        #F47621;
  --color-secondary-hover:  #D7681D;
  --color-secondary-tint:   #FDEADE;
  --color-on-secondary:     #1F2A37;

  --color-accent:           #B75819;
  --color-on-accent:        #FFFFFF;

  /* --- Ink ---------------------------------------------------- */
  --color-ink:              #1F2A37;      /* body and headings */
  --color-ink-muted:        #5B6672;        /* captions, meta */
  --color-ink-on-dark:      #FFFFFF;
  --color-ink-on-dark-muted:#B8C4D6;

  /* --- Surface ------------------------------------------------ */
  --color-surface:          #FFFFFF;     /* page background */
  --color-surface-raised:   #FFFFFF;   /* cards */
  --color-surface-subtle:   #F5F8FC;   /* alternating sections */
  --color-surface-inverse:  #1C3453;  /* dark sections */

  /* --- Line --------------------------------------------------- */
  --color-line:             #E3E8EF;
  --color-line-strong:      #C9D2DE;
  --color-focus:            #B75819;

  /* --- Status ------------------------------------------------- */
  /* Define these here or every form on the site invents its own red. */
  --color-success:          #257A4C;
  --color-warning:          #D98C00;
  --color-error:            #C62828;
  --color-info:             #3E74B9;

  /* --- Disabled ----------------------------------------------- */
  --color-disabled-bg:      #E7E7E7;
  --color-disabled-ink:     #8A939E;

  /* --- Type --------------------------------------------------- */
  /* Every stack lists a Hebrew-capable fallback before the generic
     family. Without it, Hebrew silently falls back to a system font
     and the brand breaks on its own homepage. */
  --font-display: "Rubik", "Heebo", system-ui, sans-serif;
  --font-body:    "Rubik", "Heebo", system-ui, sans-serif;
  --font-utility: "Cousine", "Courier New", monospace;

  --text-2xs:  0.7rem;
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.35rem;
  --text-2xl:  1.65rem;
  --text-3xl:  clamp(1.9rem, 1.4rem + 1.6vw, 2.4rem);
  --text-4xl:  clamp(2.3rem, 1.6rem + 2.4vw, 3rem);
  --text-5xl:  clamp(2.6rem, 1.8rem + 3.2vw, 3.5rem);

  --leading-display: 1.15;
  --leading-body:    1.65;
  --tracking-display:normal;
  --tracking-eyebrow:0.08em;

  --weight-body:    400;
  --weight-medium:  500;
  --weight-display: 700;

  /* --- Space -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-section: clamp(64px, 5vw + 32px, 96px);
  --measure: 68ch;              /* max line length for body copy */
  --container: 1200px;

  /* --- Shape and depth ---------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(28,52,83,.06), 0 4px 12px -6px rgba(28,52,83,.18);
  --shadow-2: 0 2px 4px rgba(28,52,83,.06), 0 12px 32px -12px rgba(28,52,83,.24);
  --shadow-3: 0 4px 8px rgba(28,52,83,.08), 0 24px 56px -16px rgba(28,52,83,.32);

  /* --- Motion ------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-entrance: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   Direction
   Logical properties throughout, so one stylesheet serves both
   directions. Never write left or right where start or end will do.
   ============================================================ */

html { 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;
}

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

/* Hebrew display type is harmed by the negative tracking that flatters
   Latin faces. Neutralise it unless a specific face proves otherwise. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .display { letter-spacing: normal; }

/* Mixed content: a Hebrew page carrying English URLs, model numbers or
   code. Each element takes direction from its own first strong character. */
td, th, dd, li, blockquote { unicode-bidi: plaintext; }
code, kbd, samp, .ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }

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

/* ============================================================
   Quality floor
   Aspirational, and cheap. Keep these unless there is a reason.
   ============================================================ */

: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 Cradle): two arcs from the logo's hands. Blue above, orange
   below. One ring, two colours, never closed.
   ============================================================ */

.wsc-cradle{position:relative;isolation:isolate}
.wsc-cradle::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  inline-size:100%;aspect-ratio:1;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%) rotate(-22deg);border-radius:50%;
  border:12px solid transparent;border-top-color:var(--color-brand);border-bottom-color:var(--color-secondary)}
[dir="rtl"] .wsc-cradle::after{transform:translate(50%,-50%) rotate(22deg)}
.wsc-cradle.is-thin::after{border-width:6px}