/* מרוהט brand tokens: plaster walls, ink-blue text, and the yellow of a "for sale" window sign. */
:root {
  --paper: #f1f2ee;      /* plaster */
  --paper-2: #e3e5df;    /* tile grout */
  --card: #ffffff;
  --ink: #12263a;        /* deep blue ink */
  --ink-2: #2c4258;
  --muted: #5d6b78;
  --line: #cfd3cb;
  --sign: #ffcc1a;       /* the sign yellow, used sparingly */
  --sign-ink: #12263a;
  --focus: #2f6fde;
  --danger: #b3261e;
  --ok: #1f7a4d;
  --display: "Karantina", "Assistant", system-ui, sans-serif;
  --body: "Assistant", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1d2b; --paper-2: #182a3b; --card: #142536; --ink: #eef1ec; --ink-2: #c9d2d9;
    --muted: #93a3b1; --line: #2a3e52; --focus: #7aa7ff; --danger: #ff8a80; --ok: #6fd3a0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1d2b; --paper-2: #182a3b; --card: #142536; --ink: #eef1ec; --ink-2: #c9d2d9;
  --muted: #93a3b1; --line: #2a3e52; --focus: #7aa7ff; --danger: #ff8a80; --ok: #6fd3a0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--body); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.btn { font: 700 16px/1 var(--body); border: 0; border-radius: 6px; padding: 14px 20px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sign { background: var(--sign); color: var(--sign-ink); }
.btn-sign:hover { filter: brightness(.96); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-sm { padding: 6px 10px; font-size: 13px; }

.field { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.field input, .field select, .field textarea, input, select, textarea {
  font: 400 16px/1.3 var(--body); color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line); border-radius: 6px; padding: 11px 12px; width: 100%;
}
.field input:focus, .field select:focus, input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }