/* ============================================================
   יורם מנחם — tokens.css · גרסה 2 (בהיר · מדויק · עתיר פיצ'רים)
   מקור האמת לכל ערך עיצובי באתר. אפס ערכים קשיחים בעמודים.
   ============================================================ */
:root{
  /* ---------- צבע ---------- */
  --paper:        #FBFAF7;   /* קרוב-ללבן, חם קלות. לא קרם — קרם משדר מסמך, לא מכשיר */
  --paper-2:      #F1EFE9;   /* סקשן חלופי */
  --paper-3:      #E7E3D9;   /* חול — ציטוטים, תאי דאטה */
  --surface:      #FFFFFF;
  --ink:          #101410;   /* דיו. גוון ירקרק, לא שחור טהור */
  --ink-2:        #525A4F;
  --ink-3:        #8B9287;
  --rule:         #DDD7CA;
  --rule-soft:    #EAE5DA;

  --pine:         #1E4633;   /* המותג — הקו הארוך, תוויות, מספרים */
  --pine-2:       #3E6B52;
  --pine-3:       #7C9C89;
  --pine-wash:    #E4EBE6;
  --signal:       #2FA36B;   /* חי / פעיל / דאטה */

  --wine:         #8E2F3B;   /* CTA בלבד. צועק פעם אחת */
  --wine-2:       #75252F;
  --wine-wash:    #F4E8E9;
  --on-wine:      #FFF8F3;

  --wa:           #25D366;

  /* ---------- טיפוגרפיה ---------- */
  --f-display: "David Libre", "Frank Ruhl Libre", Georgia, serif;
  --f-quote:   "Bellefair", "David Libre", Georgia, serif;
  --f-body:    "Noto Sans Hebrew", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-mega:  clamp(2.5rem, 6.4vw, 5.6rem);
  --fs-hero:  clamp(2.5rem, 7vw, 6rem);
  --fs-h1:    clamp(2.1rem, 5vw, 3.6rem);
  --fs-h2:    clamp(1.7rem, 3.8vw, 2.7rem);
  --fs-h3:    clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-quote: clamp(1.5rem, 3.8vw, 2.8rem);
  --fs-lead:  clamp(1.1rem, 1.8vw, 1.35rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-label: 0.75rem;

  --lh-body: 1.72;
  --lh-lead: 1.6;
  --lh-head: 1.18;
  --lh-mega: 1.02;

  --fw-r:400; --fw-m:500; --fw-s:600; --fw-b:700;
  --measure: 64ch;

  /* ---------- ריווח ופריסה ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:40px; --s7:64px; --s8:96px; --s9:144px; --s10:200px;
  --gutter: clamp(18px, 4.5vw, 64px);
  --maxw: 1280px;
  --maxw-text: 760px;
  --sec-y: clamp(64px, 9vw, 140px);

  /* ---------- צורה ועומק ---------- */
  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:16px; --r-pill:999px;
  --sh-1: 0 1px 2px rgba(16,20,16,.04), 0 2px 10px rgba(16,20,16,.04);
  --sh-2: 0 2px 6px rgba(16,20,16,.05), 0 16px 44px rgba(16,20,16,.09);
  --sh-3: 0 30px 80px rgba(16,20,16,.14);

  /* ---------- תנועה ---------- */
  --d-fast: 200ms;
  --d-base: 520ms;
  --d-slow: 880ms;
  --e: cubic-bezier(.16,1,.3,1);
  --e-io: cubic-bezier(.6,.05,.25,.95);
  --stagger: 80ms;
  --rise: 16px;

  /* ---------- הקו הארוך ---------- */
  --spine-w: 1px;
  --spine-x: clamp(12px, 2.6vw, 34px);
  --hud-w: 168px;
}


/* ============================================================
   מצב כהה — ערכי הטוקנים בלבד. אף רכיב לא מגדיר צבע בתוך הבלוקים האלה.
   שלושה מצבים: בחירה מפורשת (data-theme), העדפת מערכת, וברירת מחדל בהירה.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C110E; --paper-2:#111713; --paper-3:#182019; --surface:#141B16;
    --ink:#EAE7DD; --ink-2:#9FA79B; --ink-3:#6E7669;
    --rule:#27312B; --rule-soft:#1D2620;
    --pine:#72D6A0; --pine-2:#54BA84; --pine-3:#3F8060; --pine-wash:#16241C;
    --signal:#48E09A;
    --wine:#D4566A; --wine-2:#E06E80; --wine-wash:#2A161A; --on-wine:#170A0C;
    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
    --sh-2:0 2px 6px rgba(0,0,0,.45), 0 16px 44px rgba(0,0,0,.5);
    --sh-3:0 30px 80px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#0C110E; --paper-2:#111713; --paper-3:#182019; --surface:#141B16;
  --ink:#EAE7DD; --ink-2:#9FA79B; --ink-3:#6E7669;
  --rule:#27312B; --rule-soft:#1D2620;
  --pine:#72D6A0; --pine-2:#54BA84; --pine-3:#3F8060; --pine-wash:#16241C;
  --signal:#48E09A;
  --wine:#D4566A; --wine-2:#E06E80; --wine-wash:#2A161A; --on-wine:#170A0C;
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 16px 44px rgba(0,0,0,.5);
  --sh-3:0 30px 80px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce){
  :root{ --d-fast:1ms; --d-base:1ms; --d-slow:1ms; --stagger:0ms; --rise:0px; }
}