/* ==================================================================
   תעודתא · טוקנים של שפת העיצוב (גרסה 3, נובמבר 2026)
   מקור אמת אחד לאתר ולאפליקציה. אותם ערכים ב-design/tokens.json
   (והאפליקציה קוראת אותם ב-mobile/lib/theme.ts). כשמשנים כאן, משנים גם שם.

   פונטים: Rubik לכותרות ולמספרים, IBM Plex Sans Hebrew לטקסט ולממשק.
   בסיס לבן חם וצבעים טבעיים פסטליים. צבע ראשי: טרקוטה (אוכל, חום). משני: זהב (חותמות, בד"צים, דירוג).
   כל זוג טקסט/רקע כאן עומד ב-WCAG AA (4.5:1 ומעלה).
   ================================================================== */
:root {
  color-scheme: light dark;

  /* ---- משטחים ודיו ---- */
  --bg: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f5f2ec;
  --ink: #1f1b16;
  --ink-2: #5c544a;
  --ink-3: #736a5f;
  --line: #ebe5dc;
  --line-2: #f3efe8;

  /* ---- מותג ---- */
  --primary: #b84a28;
  --primary-hover: #9c3d1f;
  --primary-ink: #ffffff;
  --primary-soft: #fff0e9;
  --accent: #e2a02b;
  --accent-ink: #8a5c00;
  --accent-soft: #fbf1dc;
  --hero: #fff4ec;
  --hero-ink: #1f1b16;

  /* ---- פסטלים טבעיים: אריחי קטגוריות, איורים, רקעים רכים. טקסט עליהם תמיד ב-ink ---- */
  --pastel-peach: #fde8dc;  --pastel-sage: #e3efe3;  --pastel-sky: #e2edf7;
  --pastel-butter: #fbf0cf; --pastel-lilac: #ece6f5; --pastel-rose: #f9e3e6;
  --hero-gradient: linear-gradient(160deg, #fff1e6 0%, #fdf8f0 50%, #ecf4ea 100%);

  /* ---- סטטוס תעודה: טקסט, רקע, וסיכה במפה ---- */
  --active: #0b7a50;   --active-soft: #e3f6ec;   --active-pin: #12a067;
  --unknown: #9a5b00;  --unknown-soft: #fdf1d8;  --unknown-pin: #e09a14;
  --expired: #4b5565;  --expired-soft: #eceef2;  --expired-pin: #8b95a7;
  --revoked: #c0261e;  --revoked-soft: #fde7e5;  --revoked-pin: #e0352b;

  /* ---- מטבח ---- */
  --meat: #a3341c;  --meat-soft: #fdece7;
  --dairy: #1f5fa8; --dairy-soft: #e8f1fc;
  --parve: #3c7a2a; --parve-soft: #ebf6e6;

  /* ---- טיפוגרפיה ---- */
  --font-ui: "IBM Plex Sans Hebrew", "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
  --font-display: "Rubik", "IBM Plex Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "SF Mono", monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem;

  /* ---- מרווחים (4px) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;

  /* ---- פינות, צללים, תנועה ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(60,40,20,.06), 0 1px 3px rgba(60,40,20,.06);
  --shadow-md: 0 2px 4px rgba(60,40,20,.04), 0 8px 24px rgba(60,40,20,.08);
  --shadow-lg: 0 4px 8px rgba(60,40,20,.04), 0 24px 48px rgba(60,40,20,.14);
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms;
  --topbar-h: 64px;
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);

  /* ---- שמות ישנים, כדי שכל מה שעוד משתמש בהם ימשיך לעבוד ---- */
  --paper: var(--bg);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --brass: var(--accent-ink);
  --brass-soft: var(--accent-soft);
  --radius: var(--r-md);
  --shadow: var(--shadow-md);
}

/* מצב כהה: לפי הגדרת המכשיר. מצב הנגישות "ניגודיות כהה" (a11y-dark) עדיין גובר עליו */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --bg: #15120f;
    --surface: #1e1a16;
    --surface-2: #28231d;
    --ink: #f3eee7;
    --ink-2: #c4b9ab;
    --ink-3: #a39886;
    --line: #3a332b;
    --line-2: #2a251f;
    --primary: #f08a65;
    --primary-hover: #f6a585;
    --primary-ink: #1a0f0a;
    --primary-soft: #3d2117;
    --accent: #f2b84b;
    --accent-ink: #f2c46b;
    --accent-soft: #33280f;
    --hero: #1e1a16;
    --pastel-peach: #3a271e; --pastel-sage: #1f2e22; --pastel-sky: #1c2733;
    --pastel-butter: #332b17; --pastel-lilac: #2a2436; --pastel-rose: #352126;
    --hero-gradient: linear-gradient(160deg, #241c16 0%, #1e1a16 50%, #18201a 100%);
    --active: #5ee0a0;  --active-soft: #0f3325;  --active-pin: #22c47e;
    --unknown: #f6c25b; --unknown-soft: #3a2a0c; --unknown-pin: #f0a92a;
    --expired: #b6bfcf; --expired-soft: #252d40; --expired-pin: #8b95a7;
    --revoked: #ff8f86; --revoked-soft: #3d1513; --revoked-pin: #ff5a4f;
    --meat: #ff9e85;  --meat-soft: #3a1a12;
    --dairy: #8cbcff; --dairy-soft: #12263f;
    --parve: #9bd98a; --parve-soft: #16301a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.3), 0 24px 48px rgba(0,0,0,.5);
  }
}

/* בחירה ידנית מהכפתור בסרגל העליון: גוברת על הגדרת המכשיר */
:root.theme-dark {
  color-scheme: dark;
--bg: #15120f;
  --surface: #1e1a16;
  --surface-2: #28231d;
  --ink: #f3eee7;
  --ink-2: #c4b9ab;
  --ink-3: #a39886;
  --line: #3a332b;
  --line-2: #2a251f;
  --primary: #f08a65;
  --primary-hover: #f6a585;
  --primary-ink: #1a0f0a;
  --primary-soft: #3d2117;
  --accent: #f2b84b;
  --accent-ink: #f2c46b;
  --accent-soft: #33280f;
  --hero: #1e1a16;
  --pastel-peach: #3a271e; --pastel-sage: #1f2e22; --pastel-sky: #1c2733;
  --pastel-butter: #332b17; --pastel-lilac: #2a2436; --pastel-rose: #352126;
  --hero-gradient: linear-gradient(160deg, #241c16 0%, #1e1a16 50%, #18201a 100%);
  --active: #5ee0a0;  --active-soft: #0f3325;  --active-pin: #22c47e;
  --unknown: #f6c25b; --unknown-soft: #3a2a0c; --unknown-pin: #f0a92a;
  --expired: #b6bfcf; --expired-soft: #252d40; --expired-pin: #8b95a7;
  --revoked: #ff8f86; --revoked-soft: #3d1513; --revoked-pin: #ff5a4f;
  --meat: #ff9e85;  --meat-soft: #3a1a12;
  --dairy: #8cbcff; --dairy-soft: #12263f;
  --parve: #9bd98a; --parve-soft: #16301a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.3), 0 24px 48px rgba(0,0,0,.5);
}
:root.theme-light { color-scheme: light; }