/* ==========================================================================
   BE CLEAN — design tokens
   One hue family only: the brand turquoise. Nothing else introduces a hue.
   Radius system (documented, followed everywhere):
     buttons + pills + chips -> var(--r-pill)
     cards + panels + media  -> var(--r-lg)
     inputs                  -> var(--r-sm)
   ========================================================================== */
:root{
  /* brand ramp, built from the logo turquoise #41A8B1 / #1BC3D6 */
  --b-950:#07333A;
  --b-900:#0A4A55;
  --b-800:#0E6170;
  --b-700:#12808F;
  --b-600:#1A9FB0;
  --b-500:#2BB4C4;
  --b-400:#45C2CE;
  --b-300:#79D8E2;
  --b-200:#AEEBF1;
  --b-100:#DAF5F8;
  --b-50:#EDFAFC;

  /* semantic */
  --accent:#0D7D8A;          /* AA on white for text and small UI */
  --accent-strong:#0A4C57;
  --accent-hover:#0A6B78;
  --accent-bright:#1BC3D6;   /* logo highlight, decorative only */
  --accent-wash:var(--b-50);
  --accent-ink:#06434C;

  /* neutrals, tuned cool so they sit under the turquoise */
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --stone:#EFF8FA;
  --stone-2:#E0F1F4;
  --line:#D6E9ED;
  --ink:#0F1E21;
  --ink-2:#3E5155;
  --ink-3:#6B7F83;
  --on-brand:#FFFFFF;
  --on-brand-2:#DDF6F9;
  /* רקע הפוטר. גוון מותג עמוק, לא שחור-אפור. */
  --footer:#08333B;

  --focus:#0C3B41;

  /* radius */
  --r-sm:12px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;

  /* type */
  --f-display:'Heebo','Assistant',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-body:'Assistant',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  --t-display:clamp(2.3rem,1.5rem + 3.2vw,3.9rem);
  --t-h1:clamp(2rem,1.45rem + 2.3vw,3.1rem);
  --t-h2:clamp(1.55rem,1.24rem + 1.3vw,2.2rem);
  /* כותרת משנה בתוך עמודת תוכן. קטנה מ---t-h2 בכוונה: בעמודה צרה
     כותרת בגודל של כותרת סקשן גוזלת את ההיררכיה מהכותרת הראשית. */
  --t-h2-sub:clamp(1.3rem,1.16rem + .58vw,1.6rem);
  --t-h3-sub:clamp(1.08rem,1.02rem + .28vw,1.22rem);
  --t-h3:clamp(1.2rem,1.06rem + .6vw,1.5rem);
  --t-lead:clamp(1.06rem,1rem + .4vw,1.24rem);
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  /* rhythm */
  --shell:1200px;
  --shell-narrow:760px;
  --gut:clamp(1rem,.4rem + 2.2vw,2rem);
  --sec:clamp(3.6rem,2.4rem + 4.6vw,6.5rem);

  /* elevation, tinted to the brand hue, never neutral black */
  --sh-1:0 1px 2px rgba(12,59,65,.06), 0 2px 8px rgba(12,59,65,.05);
  --sh-2:0 2px 8px rgba(12,59,65,.07), 0 14px 34px rgba(12,59,65,.08);
  --sh-3:0 6px 16px rgba(12,59,65,.09), 0 28px 64px rgba(12,59,65,.13);
  --sh-brand:0 10px 30px rgba(13,125,138,.30);

  --ease:cubic-bezier(.16,1,.3,1);
  /* עקומות חזקות יותר מברירת המחדל של CSS. כניסה ויציאה תמיד ease-out,
     תנועה על המסך ease-in-out, תנועה קבועה linear. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --dur:.32s;
  --dur-fast:.16s;
  --dur-ui:.22s;

  /* ריתמוס אנכי בעמודת תוכן. gap מעל כותרת גדול מה-gap שמתחתיה,
     כדי שהכותרת תידבק לפסקה שלה ולא תרחף בין שתי פסקאות. */
  --flow:clamp(1.15rem,1rem + .5vw,1.5rem);
  --flow-h:clamp(2.4rem,1.8rem + 1.9vw,3.4rem);
}

/* Dark mode keeps the same hue family and the same hierarchy. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B1517;
    --surface:#111F22;
    --stone:#132226;
    --stone-2:#1A2C30;
    --line:#22383D;
    --ink:#EAF4F5;
    --ink-2:#B4C9CC;
    --ink-3:#83999D;

    --accent:#5CC2CB;
    --accent-strong:#A7E2E8;
    --accent-hover:#7AD2DA;
    --accent-wash:#10292D;
    --accent-ink:#CDEFF2;
    --focus:#5CC2CB;

    --sh-1:0 1px 2px rgba(0,0,0,.45);
    --sh-2:0 2px 8px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.4);
    --sh-3:0 6px 16px rgba(0,0,0,.55), 0 28px 64px rgba(0,0,0,.45);
    --sh-brand:0 10px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#0B1517; --surface:#111F22; --stone:#132226; --stone-2:#1A2C30;
  --line:#22383D; --ink:#EAF4F5; --ink-2:#B4C9CC; --ink-3:#83999D;
  --accent:#5CC2CB; --accent-strong:#A7E2E8; --accent-hover:#7AD2DA;
  --accent-wash:#10292D; --accent-ink:#CDEFF2; --focus:#5CC2CB;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 2px 8px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.4);
  --sh-3:0 6px 16px rgba(0,0,0,.55), 0 28px 64px rgba(0,0,0,.45);
  --sh-brand:0 10px 30px rgba(0,0,0,.5);
}