/* tokens.css · הזהות של הלקוח. הקובץ היחיד שבו מותר צבע, פונט או גודל.
 *
 * פלטה מהעמודים של אסתר (astrbr5: כחול #3a6e8f, קרם #f5efe4, חול #c2a882) ומצילום הקלפים (יוטה, טרקוטה). בלי ורוד, לפי בקשתה 15.10.
 * ⛔ ההערה המקורית: הפלטה הזאת היא placeholder נייטרלי. לפני שבונים עמוד אחד: לדגום מהלוגו או מהעמודים
 * שעבדו אצל הלקוח (design-system.md §1), להריץ tools/choose.mjs, ועידו בוחר.
 * בסיס בהיר. כהה רק בתחתית. --ink-soft לפחות 4.5:1 על --bg (לא אפור 3:1).
 */
:root {
  /* רקעים: שלושה בהירים לסירוגין, כהה אחד לסקציית הקשר ולפוטר */
  --bg:    #FAF6EF;
  --bg-2:  #F1E8DA;
  --bg-3:  #EAEEEE;
  --card:  #FFFFFF;
  --dark:  #1F3A4A;

  /* טקסט */
  --ink:       #22303A;
  --ink-soft:  #4A5560;
  --on-dark:       #F7F1E7;
  --on-dark-soft:  #C9D3D9;

  /* מותג */
  --brand:     #3A6E8F;
  --brand-ink: #2E5C78;          /* המותג כטקסט על רקע בהיר: 4.5:1 לפחות */
  --accent:    #2E5C78;          /* כפתורים. טקסט הכפתור (--on-accent) 4.5:1 עליו */
  --on-accent: #FFFFFF;
  --accent-on-dark: #DCC39B;
  --band:      #8E5233;          /* רצועת עובדות ו-quick-bar */
  --on-band:   #FFFFFF;
  --a11y:      #2E5C78;          /* כפתור הנגישות */

  --line:        rgba(34, 48, 58, .10);
  --line-strong: rgba(34, 48, 58, .28);
  --shadow:      rgba(34, 48, 58, .28);

  /* פונטים: חייבים להיות ב-config.fonts, אחרת השער נכשל */
  --ff-head: 'Rubik', sans-serif;
  --ff-body: 'IBM Plex Sans Hebrew', sans-serif;
  --fw-head: 400;
  --fw-body: 400;

  /* סקאלה אחת, 7 מדרגות, rem בלבד */
  --fs-display: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h3:      1.375rem;
  --fs-lead:    1.1875rem;
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-label:   .8125rem;

  /* מרווחים: ערך אחד לכל סוג זוג */
  --s-pair:    .625rem;
  --s-tight:   .75rem;
  --s-text:    1.25rem;
  --s-block:   2.5rem;
  --s-section: 4rem;
  --s-hero:    3.5rem;

  --radius-sm: .5rem;
  --radius-lg: .875rem;
  --radius-btn: 999px;
  --maxw: 72rem;
  --navh: 4.5rem;
}
@media (min-width: 861px) {
  :root { --s-block: 3.25rem; --s-section: 6rem; --s-hero: 5rem; }
}
