/* Gedeelde basis voor leer-app en beheer: fonts, kleuren, knoppen, letterstijl. */
@font-face { font-family: 'IvritPrint'; src: url('../fonts/FrankRuhlLibre-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IvritPrint'; src: url('../fonts/FrankRuhlLibre-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IvritScreen'; src: url('../fonts/NotoSansHebrew-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IvritHand'; src: url('../fonts/GveretLevin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --paper: #faf6ee; --panel: #fffdf8; --panel2: #f6efe1; --ink: #2a2016; --muted: #7d6e58;
  --line: #e5dcc9; --accent: #9a3b2e; --accent-ink: #fff; --accent-soft: #f2e4df;
  --good: #3f7d4e; --good-soft: #e3f0e4; --warn: #9a6a12; --warn-soft: #f7ecd6; --bad: #b0412f; --bad-soft: #f6e0db;
  --shadow: 0 1px 2px rgba(60,40,20,.06), 0 6px 16px rgba(60,40,20,.06);
  --radius: 14px;
  --ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --he-font: 'IvritPrint', 'Times New Roman', serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191512; --panel: #221d18; --panel2: #2a231c; --ink: #efe6d6; --muted: #a9977c;
    --line: #3a3128; --accent: #e08a72; --accent-ink: #1b1410; --accent-soft: #3a241f;
    --good: #7fc08c; --good-soft: #20321f; --warn: #e2b55c; --warn-soft: #33281a; --bad: #ef8a76; --bad-soft: #3a211c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --paper: #191512; --panel: #221d18; --panel2: #2a231c; --ink: #efe6d6; --muted: #a9977c;
  --line: #3a3128; --accent: #e08a72; --accent-ink: #1b1410; --accent-soft: #3a241f;
  --good: #7fc08c; --good-soft: #20321f; --warn: #e2b55c; --warn-soft: #33281a; --bad: #ef8a76; --bad-soft: #3a211c;
}

/* Letterstijl, gekozen via <html data-script="…"> */
:root[data-script="screen"] { --he-font: 'IvritScreen', 'Arial Hebrew', sans-serif; }
:root[data-script="hand"] { --he-font: 'IvritHand', cursive; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); line-height: 1.45; }
h1, h2, h3 { font-family: 'IvritPrint', Georgia, serif; font-weight: 700; margin: 0; }
a { color: var(--accent); }

.he { font-family: var(--he-font); direction: rtl; unicode-bidi: isolate; font-weight: 400; }
.he.print { font-family: 'IvritPrint', serif; }
.he.screen { font-family: 'IvritScreen', sans-serif; }
.he.hand { font-family: 'IvritHand', cursive; }

.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow); min-height: 44px;
  transition: transform .1s, background .15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: var(--panel2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.good { background: var(--good); color: #fff; border-color: transparent; }
.btn.quiet { box-shadow: none; background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.muted { color: var(--muted); }
.notice { padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.good { background: var(--good-soft); color: var(--good); }
.notice.bad { background: var(--bad-soft); color: var(--bad); }