/* ============================================================
   WildPaw Genomics - טוקנים משותפים
   גרסה 1.4

   מה השתנה מ-1.1:
   1. נוספו שלוש סקאלות לאזור המנויים - לבנדר, תכלת ואלמוג.
   2. הסקאלה הניטרלית הועברה מירקרק לשמנת חמימה.
   3. שלושת הגרדיאנטים הופנו לפלטה החדשה.
   4. נוספו טוקני פאנל לכל אחד מעולמות התוכן.
   5. הגופנים עודכנו ל-Rubik ו-Assistant בהתאם לאתר הציבורי.

   מה השתנה מ-1.2:
   6. נוספו טוקני הסליל ו-CSS של הסליל, מנוידים מהאתר הציבורי.

   מה השתנה מ-1.3:
   7. רקע הדף הועמק לגוון לבנדר. ב-1.3 הוא היה #fdfcf8 מול כרטיסים
      לבנים, הפרש שלא נראה לעין, והדף נקרא כיריעה אחת בלי היררכיה.
      --n50 הוא מעתה רקע הדף בלבד. למשטח לבן יש --surface.

   הסקאלות של הירוק והכחול נשמרו כפי שהן. שום שם טוקן לא נמחק,
   ולכן קובץ ה-HTML הקיים ממשיך לעבוד בלי שינוי.
   ============================================================ */

:root {
  /* ─── ירוק - נשאר צבע המותג של האתר הציבורי ─── */
  --g900:#0a2218; --g800:#0f3326; --g700:#155232; --g600:#1a6b40;
  --g500:#22884f; --g400:#2aaa60; --g300:#4dbf7e; --g200:#85d8a8;
  --g100:#c2edcf; --g50:#eaf7ef;

  /* ─── כחול ─── */
  --b900:#06183a; --b800:#0a2a5c; --b700:#103d80; --b600:#1752a8;
  --b500:#1d6bd4; --b400:#3b87e8; --b200:#a8ccf6; --b100:#d4e8fb; --b50:#eef5fd;

  /* ─── לבנדר - הצבע המוביל של אזור המנויים ─── */
  --l900:#241a44; --l800:#33265f; --l700:#48377f; --l600:#5f4aa3;
  --l500:#7e6bc4; --l400:#9b8bd4; --l300:#b7abe3; --l200:#d3cbef;
  --l100:#e8e3f8; --l50:#f4f1fc;

  /* ─── תכלת ירקרקה - יושבת בין הירוק לתכלת של האתר ─── */
  --tl900:#03302f; --tl800:#064746; --tl700:#0a625f; --tl600:#0f8480;
  --tl500:#1aa6a0; --tl400:#37c1bb; --tl300:#6dd7d2; --tl200:#a6e8e5;
  --tl100:#d1f4f2; --tl50:#ecfaf9;

  /* ─── אלמוג ─── */
  --co900:#4a150c; --co800:#6d2214; --co700:#96321f; --co600:#c1462f;
  --co500:#e8614d; --co400:#f0836f; --co300:#f5a595; --co200:#f9c6bc;
  --co100:#fce3de; --co50:#fef2ef;

  /* ─── ניטרלי בגוון שמנת ─── */
  --n900:#231f1a; --n800:#3a342c; --n700:#554d42; --n600:#756c5f;
  --n500:#7d7466; --n200:#d8d3e2; --n100:#e7e3f0; --n50:#f1eef8;

  /* משטח כרטיס. חייב להישאר בהיר מ---n50, אחרת אין הפרדה. */
  --surface:#fff;

  --shadow-sm:0 1px 3px rgba(35,28,15,.07);
  --shadow-md:0 4px 16px rgba(35,28,15,.1);
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px;

  /* ─── דרגות משמעות של ממצא גנטי ───
     האדום הועמק ביחס ל-1.1 כדי שלא יתבלבל עם האלמוג של פאנל המגדלים.
     כל דרגה מלווה תמיד בתווית טקסט ולא רק בצבע. */
  --sig-clear:var(--g500);
  --sig-carrier:#c98a1f;
  --sig-carrier-bg:#fdf4e3;
  --sig-risk:#b3271a;
  --sig-risk-bg:#fbeae7;
  --sig-info:var(--b500);
  --sig-info-bg:var(--b50);

  /* ─── אקצנט הצטיינות ───
     הזהב שמור לבאנר הגילוי ולציוני השבח למגדלים ולשום מקום אחר.
     בגלל זה אין סקאלת ענבר בקובץ הזה - היא הייתה מרוקנת אותו ממשמעות. */
  --gold:#f0c96b;
  --gold-deep:#d9a93f;
  --gold-ink:#4a3708;

  /* ─── פאנל לכל עולם תוכן ───
     כל עולם מקבל משטח משלו, בדומה לקופסאות של Embark, במקום דף אחיד.
     -ink הוא צבע הטקסט שיושב על אותו משטח. */
  --pan-learn:var(--l500);      --pan-learn-ink:#fff;
  --pan-articles:var(--l700);   --pan-articles-ink:#fff;
  --pan-recs:var(--tl500);      --pan-recs-ink:#fff;
  --pan-breeders:var(--co500);  --pan-breeders-ink:#fff;
  --pan-qa:var(--b500);         --pan-qa-ink:#fff;

  /* גרסאות רכות של אותם פאנלים, לכרטיסים על רקע שמנת */
  --pan-learn-soft:var(--l50);      --pan-learn-soft-ink:var(--l800);
  --pan-articles-soft:var(--l100);  --pan-articles-soft-ink:var(--l900);
  --pan-recs-soft:var(--tl50);      --pan-recs-soft-ink:var(--tl800);
  --pan-breeders-soft:var(--co50);  --pan-breeders-soft-ink:var(--co800);
  --pan-qa-soft:var(--b50);         --pan-qa-soft-ink:var(--b800);

  /* ─── סליל ה-DNA ───
     הערכים הם RGB בלי עטיפה, כי helix.js מרכיב מהם rgba בעצמו.
     a ו-b הם שני הגדילים על רקע שמנת. c הוא הגדיל התכלת.
     w הוא לבן, לסלילים שרצים על פאנל צבעוני מלא. */
  --helix-a:126,107,196;
  --helix-b:179,171,227;
  --helix-c:26,166,160;
  --helix-w:255,255,255;

  /* לנקודות הסטטיות ב-.pan-band, שאינן קנבס */
  --helix-on-color:rgba(255,255,255,.34);
  --helix-on-cream:rgba(126,107,196,.28);

  --brand-grad:linear-gradient(135deg,var(--l500),var(--tl500));
  --prestige-grad:linear-gradient(135deg,#241a44 0%,#33265f 45%,#064746 100%);
  --hero-grad:linear-gradient(135deg,#5f4aa3 0%,#7e6bc4 28%,#1aa6a0 72%,#0f8480 100%);
}

/* ─── RESET ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Assistant','Rubik',system-ui,sans-serif;
  background:var(--n50);color:var(--n900);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Rubik','Assistant',system-ui,sans-serif;}
img{max-width:100%;display:block;}
button{cursor:pointer;font-family:inherit;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

/* ─── מתג שפה ───────────────────────────────── */
[lang="en"] .he{display:none!important;}
[lang="he"] .en{display:none!important;}
body[lang="en"]{direction:ltr;}

/* ─── כפתורים משותפים ───────────────────────── */
.btn-ghost{
  background:none;border:1.5px solid var(--n200);color:var(--n700);
  padding:.5rem 1.1rem;border-radius:var(--radius-sm);
  font-size:.85rem;font-weight:600;transition:all .15s;
}
.btn-ghost:hover{border-color:var(--l400);color:var(--l700);}

.btn-cta{
  background:var(--brand-grad);color:#fff;border:none;
  padding:.55rem 1.3rem;border-radius:var(--radius-sm);
  font-size:.875rem;font-weight:700;transition:opacity .15s;
}
.btn-cta:hover{opacity:.88;}

.lang-btn{
  background:var(--n50);border:1px solid var(--n200);color:var(--n700);
  padding:.35rem .75rem;border-radius:6px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;
}
.lang-btn:hover{background:var(--n100);}

/* ─── סליל ה-DNA ───
   כל קנבס עם class="helix" נצבע ומונפש על ידי helix.js.
   העוצמה נשלטת ב-opacity לכל מופע בנפרד. */
.helix{
  position:absolute;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 20%,#000 82%,transparent);
}
.helix-gate{inset-block:-8% -8%;inset-inline-start:50%;transform:translateX(-50%);width:86%;opacity:.40;}
.helix-panel{inset-block:-10% -10%;inset-inline-end:-4%;width:min(34%,320px);opacity:.55;}
.helix-side{inset-block:6% 6%;inset-inline-start:-2%;width:min(14%,160px);opacity:.24;}

/* ─── פאנל עולם תוכן ───
   הוסף data-pan="learn" (או recs / breeders / qa / articles)
   על אלמנט ה-.sec כדי לצבוע אותו. */
[data-pan]{--pan:var(--n100);--pan-ink:var(--n900);}
[data-pan="learn"]{--pan:var(--pan-learn);--pan-ink:var(--pan-learn-ink);}
[data-pan="articles"]{--pan:var(--pan-articles);--pan-ink:var(--pan-articles-ink);}
[data-pan="recs"]{--pan:var(--pan-recs);--pan-ink:var(--pan-recs-ink);}
[data-pan="breeders"]{--pan:var(--pan-breeders);--pan-ink:var(--pan-breeders-ink);}
[data-pan="qa"]{--pan:var(--pan-qa);--pan-ink:var(--pan-qa-ink);}

.pan-band{
  background:var(--pan);color:var(--pan-ink);
  border-radius:var(--radius-lg);padding:1.8rem 1.6rem;
  position:relative;overflow:hidden;
}
.pan-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--helix-on-color) 1.1px,transparent 1.4px);
  background-size:26px 26px;
}
.pan-band > *{position:relative;z-index:1;}

/* ─── רצפת איכות ────────────────────────────── */
:focus-visible{outline:2.5px solid var(--l600);outline-offset:2px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
}