/* =====================================================================
   מערכת עיצוב — השווארמה של באבי · v14 "גחלים, אבן וזעפרן"
   דימונה = מדבר: אבן גיר חמה ביום, פחם וגחלים בלילה, זעפרן וסומאק על הדלפק.
   שכבה 1: פלטה (פרימיטיבים). שכבה 2: סמנטיקה — בקוד משתמשים רק בשכבה 2.
   כל צירוף טקסט/רקע נבדק ל-WCAG AA (הערכים בהערות = יחס ניגודיות).
   ===================================================================== */
:root {
  /* ---------- פלטה ---------- */
  --coal: #1c1714;        /* פחם — טקסט ראשי, סרגל, פוטר */
  --coal-2: #2a221d;      /* פחם בהיר — משטחים כהים */
  --coal-3: #3a2f28;
  --stone: #f4ede2;       /* אבן גיר — רקע הדף */
  --stone-2: #ebe2d4;     /* אבן שקועה — אריחים, hover */
  --stone-3: #dfd3c1;     /* קווים חזקים על אבן */
  --chalk: #fbf7f0;       /* משטח — כרטיסים וחלונות */
  --saffron: #d9822b;     /* זעפרן — פעולה. טקסט עליו: פחם (6.1:1) */
  --saffron-2: #c4721f;   /* hover */
  --saffron-soft: #f8e3c8;
  --saffron-glow: #f2b46a;/* זעפרן על רקע כהה (9.7:1 מול coal) */
  --sumac: #8e2a1e;       /* סומאק — מותג, מחירים (7.9:1 מול chalk) */
  --sumac-2: #6f1f15;
  --sumac-soft: #f5e1dc;
  --ember: #e8572a;       /* גחלת — נקודות קטנות בלבד, לא טקסט */
  --olive: #4f6b3a;       /* זית — פתוח / הצלחה (5.6:1 מול chalk על טקסט לבן) */
  --olive-soft: #e4ead9;

  /* תאימות לאחור: שמות ישנים → הפלטה החדשה (כדי שאף קובץ לא יישבר) */
  --char: var(--coal); --char-2: var(--coal-2); --brown: var(--coal-3);
  --ink: var(--coal); --ink-2: #5a4d43; --ink-3: #6e6055;
  --cream: var(--stone); --paper: var(--stone); --paper-2: var(--stone-2); --white: var(--chalk);
  --line: #e0d5c5; --crimson: var(--sumac); --crimson-deep: var(--sumac-2);
  --ochre: var(--saffron); --gold: var(--saffron-glow); --gold-soft: #f6d3a6;
  --ok: var(--olive); --danger: #a3261b;

  /* ---------- טיפוגרפיה ---------- */
  --f-display: 'Suez One', 'Heebo', 'Arial Hebrew', serif;   /* שלט — משקל אחד (400) */
  --f-body: 'Heebo', 'Assistant', 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.75rem, 5.2vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 7vw, 3.5rem);
  --fs-display: clamp(3.25rem, 13vw, 6.5rem);
  --lh-tight: 1.25;

  /* ---------- ריווח ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --gutter: 16px;

  /* ---------- צורה ---------- */
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-xl: 28px; --r-pill: 999px;
  /* צללים חמים (חום, לא שחור) — שלוש רמות */
  --sh-1: 0 1px 2px rgba(60, 35, 20, .08), 0 2px 8px -2px rgba(60, 35, 20, .08);
  --sh-2: 0 10px 28px -10px rgba(60, 35, 20, .28), 0 2px 6px rgba(60, 35, 20, .06);
  --sh-float: 0 18px 44px -12px rgba(40, 22, 12, .38), 0 3px 10px rgba(40, 22, 12, .10);
  --sh-bar: 0 -8px 28px rgba(28, 23, 20, .22);
  /* גרעיניות עדינה של אבן */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");

  /* ---------- סמנטיקה ---------- */
  --surface-page: var(--stone);
  --surface: var(--chalk);
  --surface-sunk: var(--stone-2);
  --surface-dark: var(--coal);
  --text: var(--coal);              /* 16.6:1 מול chalk */
  --text-2: #5a4d43;                /* 7.6:1 מול chalk, 7.0:1 מול stone */
  --text-3: #6e6055;                /* 5.6:1 מול chalk — טקסט עזר */
  --text-on-dark: var(--stone);     /* 15.3:1 מול coal */
  --text-on-dark-2: #c9bcab;        /* 9.5:1 מול coal */
  --border: #e0d5c5;
  --border-strong: #8f7c69;         /* 3.7:1 — גבול שדה (WCAG 1.4.11) */
  /* מותג (טקסט מודגש, מחירים, קישורים) */
  --accent: var(--sumac);           /* 7.9:1 מול chalk */
  --accent-hover: var(--sumac-2);
  --accent-soft: var(--sumac-soft);
  --on-accent: var(--chalk);
  /* פעולה (כפתורי הוספה / הזמנה) */
  --action: var(--saffron);
  --action-hover: var(--saffron-2);
  --action-soft: var(--saffron-soft);
  --on-action: var(--coal);         /* 6.1:1 */
  --price: var(--sumac);
  --selected: var(--coal);
  --on-selected: var(--stone);
  /* מצבים */
  --ok-soft: var(--olive-soft);
  --ok-text: #344a24;               /* 7.9:1 מול olive-soft */
  --warn-soft: #f7e4dc;
  --danger-text: #8a2116;           /* 7.4:1 מול warn-soft */
  --disabled-bg: #e4dacb;
  --disabled-text: #5a4d43;         /* 5.9:1 */
  /* פוקוס: טבעת כפולה — זעפרן על פחם, נראית על כל רקע */
  --focus-inner: var(--chalk);
  --focus-outer: var(--coal);
  --focus-ring: 0 0 0 2px var(--chalk), 0 0 0 4px var(--coal), 0 0 0 6px var(--saffron);

  /* ---------- גדלים ---------- */
  --tap: 44px;
  --tap-l: 52px;
  --control-h: 52px;
  --sheet-max: 600px;
  --pad-sheet: 20px;
  --topbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ---------- תנועה ושכבות ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .16s;
  --dur: .24s;
  --dur-slow: .38s;
  --z-bar: 50;
  --z-layer: 100;
  --z-toast: 120;

  color-scheme: light;
}
@media (min-width: 760px) { :root { --gutter: 28px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }