/* Loop - צבעים, טיפוגרפיה, תנועה. הפלטה מהלוח שלינוי בחרה:
   F4F1DE קרם · B0A08C חום-אפור · B8C9A9 מרווה · 8395A7 כחול-אבק · D8A7B1 ורוד-אבק */

:root {
  color-scheme: light;

  /* בסיס */
  --bg: #F4F1DE;
  --surface: #FBFAF3;
  --surface-2: #EDE9D3;
  --surface-3: #E4DEC6;
  --line: rgba(122, 107, 88, 0.18);
  --line-strong: rgba(122, 107, 88, 0.32);
  --ink: #2B2A26;
  --ink-2: #5F584D;
  --ink-3: #8A8172;

  /* חמשת צבעי הפלטה + גוון כהה לטקסט + גוון רך לרקעים */
  --pink: #D8A7B1;   --pink-ink: #8E4D5C;  --pink-soft: #F2DEE2;
  --blue: #8395A7;   --blue-ink: #44566B;  --blue-soft: #DEE4EB;
  --sage: #B8C9A9;   --sage-ink: #4E6541;  --sage-soft: #E3EBDA;
  --taupe: #B0A08C;  --taupe-ink: #6C5E4C; --taupe-soft: #E9E2D4;
  --cream: #F4F1DE;
  --danger: #B9605F; --danger-soft: #F4DCDA;

  --on-accent: #2B2A26;
  --focus: #44566B;

  --shadow-1: 0 1px 2px rgba(60, 50, 35, 0.06), 0 1px 1px rgba(60, 50, 35, 0.04);
  --shadow-2: 0 6px 20px -6px rgba(60, 50, 35, 0.18), 0 2px 6px rgba(60, 50, 35, 0.06);
  --shadow-3: 0 24px 60px -16px rgba(50, 40, 25, 0.32);

  /* צורה */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* טיפוגרפיה: Heebo לממשק, Rubik לכותרות */
  --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Rubik', 'Heebo', system-ui, sans-serif;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* תנועה (emil-design-eng): רק ease-out וחזקים, אף פעם ease-in */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 160ms;
  --t-fast: 180ms;
  --t-med: 240ms;

  /* צבע האזור: כל אזור באפליקציה מקבל צבע קבוע מהפלטה (main.js קובע data-sec)
     כחול = תוכן ופרסום · ורוד = לופים ואנשים · מרווה = שיחות · חום = סקירה והגדרות */
  --acc: var(--taupe); --acc-ink: var(--taupe-ink); --acc-soft: var(--taupe-soft);

  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

:root[data-sec="blue"] { --acc: var(--blue); --acc-ink: var(--blue-ink); --acc-soft: var(--blue-soft); }
:root[data-sec="pink"] { --acc: var(--pink); --acc-ink: var(--pink-ink); --acc-soft: var(--pink-soft); }
:root[data-sec="sage"] { --acc: var(--sage); --acc-ink: var(--sage-ink); --acc-soft: var(--sage-soft); }
:root[data-sec="taupe"] { --acc: var(--taupe); --acc-ink: var(--taupe-ink); --acc-soft: var(--taupe-soft); }

/* מצב כהה: סקריפט קטן ב-<head> קובע data-theme לפי הבחירה (אוטומטי/בהיר/כהה) לפני הציור הראשון */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1B1A17;
  --surface: #24221E;
  --surface-2: #2E2B26;
  --surface-3: #39352E;
  --line: rgba(244, 241, 222, 0.09);
  --line-strong: rgba(244, 241, 222, 0.18);
  --ink: #F4F1DE;
  --ink-2: #C3BBAA;
  --ink-3: #8F8778;

  --pink: #E2B4BC;  --pink-ink: #EDC3CA;  --pink-soft: rgba(216, 167, 177, 0.16);
  --blue: #97A8BA;  --blue-ink: #B7C5D4;  --blue-soft: rgba(131, 149, 167, 0.18);
  --sage: #C3D3B3;  --sage-ink: #CDDCBE;  --sage-soft: rgba(184, 201, 169, 0.15);
  --taupe: #BFB09C; --taupe-ink: #D3C6B3; --taupe-soft: rgba(176, 160, 140, 0.16);
  --danger: #E39A97; --danger-soft: rgba(226, 120, 116, 0.16);

  --on-accent: #1F1D1A;
  --focus: #B7C5D4;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
}