/* המטבח המשפחתי - ערכות התצוגה
   הערכים נעולים ב-design.md סעיף 3. אל תחליף אותם ואל תוסיף צבעים מחוץ לרשימה.
   אותם תשעה שמות בשתי הערכות, ולכן החלפה = שינוי data-theme על אלמנט השורש. */

[data-theme='light'] {
  color-scheme: light;
  --paper: #FAF4E8;
  --panel: #FFFCF4;
  --ink: #2A2018;
  --muted: #7C6A55;
  --accent: #A34A2A;
  --accent-ink: #FFF7EF;
  --rule: #DCCEB6;
  --tag: #EFE4CE;
  --shade: #F3EADA;
}

[data-theme='dark'] {
  color-scheme: dark;
  --paper: #17130F;
  --panel: #201A15;
  --ink: #F1E7D7;
  --muted: #A08C73;
  --accent: #D9805A;
  --accent-ink: #1A120C;
  --rule: #382E24;
  --tag: #2C241C;
  --shade: #1D1712;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* חייב לבוא לפני כל הרכיבים: כל כלל display של מחבר האתר גובר על
   [hidden] של הדפדפן, ואז אלמנט שהקוד הסתיר ממשיך להופיע על המסך. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Rubik, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

input,
textarea,
select,
button {
  font-family: Rubik, sans-serif;
  color: inherit;
}

::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}