/* Origins design tokens — THE single source of visual truth.
   Change here → every page follows. Documented as the project design book.

   Palette: "Ocean" (chosen 2026-07-06 from the Claude Design explorations),
   tuned so every text/background pairing passes WCAG 4.5:1 at the sizes used.
   Scales, not ad-hoc values: type (--fs-*), radius (--r-*), spacing (8px grid). */

/* ---- font: Assistant (self-hosted, hebrew+latin, 3 weights) ---- */
@font-face{font-family:"Assistant";font-weight:400;font-display:swap;
  src:url("fonts/assistant-400-hebrew.woff2") format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:"Assistant";font-weight:400;font-display:swap;
  src:url("fonts/assistant-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:"Assistant";font-weight:600;font-display:swap;
  src:url("fonts/assistant-600-hebrew.woff2") format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:"Assistant";font-weight:600;font-display:swap;
  src:url("fonts/assistant-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:"Assistant";font-weight:700;font-display:swap;
  src:url("fonts/assistant-700-hebrew.woff2") format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:"Assistant";font-weight:700;font-display:swap;
  src:url("fonts/assistant-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}

/* ---- palette & theme ---- */
:root{
  color-scheme:light;
  --bg:#f4f7f9;          /* ocean — cool neutral */
  --ink:#22303a;
  --muted:#5f7482;
  --line:#dde4e9;
  --card:#ffffff;
  --hover:#eaf0f4;
  --accent:#b04e15;      /* terracotta — marriages, uids (4.95:1 on bg) */
  --link:#2a72a0;        /* ocean blue (4.86:1 on bg) */
  --danger-bg:#f6e7e2;  --danger-ink:#a13c2a;
  --ok-bg:#e4efe7;      --ok-ink:#22694a;
  --warn-bg:#f7efdd;    --warn-ink:#7a5a1e;  --warn-line:#dfc286;
  /* sunburst center hub */
  --center-bg:#e9eef2; --center-line:#c9d5dd; --center-ink:#41586a;
  /* wedge shading endpoints (JS reads these for the fill interpolation) */
  --paper:#ffffff; --fade:#edf1f4;
  --on-accent:#ffffff;   /* text on accent-filled controls (both themes) */
  /* family branch hues — data colors, deliberately vivid vs the quiet chrome */
  --fam-1:#5b8db5; --fam-2:#5a9e6f; --fam-3:#9a6cb4; --fam-4:#c08a3e;
  /* marriage visibility (E2.4): rest-state spouse band on a wedge's inner
     edge, and the selection-thread stroke width (color is --accent) */
  --band-w:2px; --thread-w:1.5px;
  --font:"Assistant",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  /* type scale */
  --fs-title:24px; --fs-h2:12px; --fs-body:15px; --fs-caption:13px; --fs-caption2:12px;
  --fs-wedge:11px; --fs-wedge-deep:9.5px;  /* sunburst SVG labels only */
  /* radius scale (concentric: inner ≤ outer) */
  --r-s:8px; --r-m:12px; --r-l:16px;
  /* touch + layout */
  --tap:44px; --tabbar-h:56px;
  /* motion */
  --dur-fast:120ms; --dur:240ms; --dur-reroot:360ms;
  /* one sheet shadow — no gradients, no glow */
  --shadow-sheet:0 -6px 24px rgba(0,0,0,.08);
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#141c22; --ink:#dfe8ee; --muted:#8ba0ae; --line:#2c3944;
  --card:#1d2830; --hover:#253440;
  --accent:#e07a3f;      /* 5.8:1 on dark bg */
  --link:#66aede;        /* 7.1:1 on dark bg */
  --danger-bg:#3a2620; --danger-ink:#eb9c86;
  --ok-bg:#1e2f26;     --ok-ink:#8cc9a6;
  --warn-bg:#332b1a;   --warn-ink:#dcb877; --warn-line:#5c4c26;
  --center-bg:#26333d; --center-line:#3a4c59; --center-ink:#b9cbd8;
  --paper:#233039; --fade:#1b2630;
}

/* ---- base ---- */
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:var(--fs-body);-webkit-font-smoothing:antialiased;}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-weight:700;}

/* keyboard focus — visible on every interactive element, in both themes */
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:2px;}

/* ---- controls (one look everywhere) ---- */
button,.btn{padding:7px 16px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:var(--r-s);cursor:pointer;font-size:var(--fs-caption);
  font-family:inherit;transition:background var(--dur-fast),border-color var(--dur-fast);}
button:hover,.btn:hover{background:var(--hover);text-decoration:none;}
button:active,.btn:active{transform:translateY(0.5px);}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:600;}
button.primary:hover,.btn.primary:hover{filter:brightness(1.07);background:var(--accent);}
input,select,textarea{padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--card);color:var(--ink);
  font-size:14px;font-family:inherit;transition:border-color var(--dur-fast);}
input:hover,select:hover,textarea:hover{border-color:var(--muted);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--link);outline-offset:0;border-color:transparent;}
::placeholder{color:var(--muted);opacity:.7;}
/* iOS Safari zooms into any focused input under 16px — never on phones */
@media (max-width:700px){ input,select,textarea{font-size:16px;} }

/* ---- shared bits ---- */
.theme-btn{border:1px solid var(--line);background:var(--card);color:var(--muted);
  border-radius:var(--r-s);padding:2px 9px;cursor:pointer;font-size:var(--fs-caption);}
.chip{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;
  background:var(--hover);color:var(--muted);}
.chip.danger{background:var(--danger-bg);color:var(--danger-ink);}
.chip.ok{background:var(--ok-bg);color:var(--ok-ink);}
.banner{border:1px solid var(--line);border-radius:var(--r-m);padding:12px 16px;
  margin-bottom:14px;background:var(--card);}
.banner.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok-ink) 30%,var(--ok-bg));}
.banner.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line);}
.banner.danger{background:var(--danger-bg);color:var(--danger-ink);border-color:color-mix(in srgb,var(--danger-ink) 30%,var(--danger-bg));}
.card-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);}
.card-box--row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* ---- shared nav + footer ----
   The bar spans the window; its CONTENT aligns to the page: centered pages
   set --nav-w (≈ their main width) so the links sit over the content, while
   full-bleed pages (sunburst, table) leave it unset = full width. */
.topnav{display:block;padding:0 18px;background:var(--card);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.topnav .nav-in{display:flex;gap:16px;align-items:center;min-height:46px;
  flex-wrap:wrap;width:100%;max-width:var(--nav-w,none);margin:0 auto;}
.topnav a{color:var(--muted);font-size:14px;padding:12px 2px;}
.topnav a:hover{color:var(--ink);text-decoration:none;}
.topnav a.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px var(--accent);}
.topnav .acct{margin-inline-start:auto;display:flex;gap:10px;align-items:center;
  color:var(--muted);font-size:var(--fs-caption2);}
.topnav .linkish{border:none;background:none;color:var(--muted);cursor:pointer;
  padding:0;font-size:var(--fs-caption2);}
.topnav .linkish:hover{color:var(--ink);background:none;}
.foot{padding:18px;color:var(--muted);font-size:var(--fs-caption2);text-align:center;}
.foot a{color:var(--muted);text-decoration:underline;}
.foot .v{direction:ltr;unicode-bidi:embed;}

/* inline SVG icons: stroke follows text color, size follows font */
svg.icn{width:1.05em;height:1.05em;vertical-align:-0.18em;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

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

/* PR-D — the site tab bar: the mobile navigation spine (audit's verdict:
   3 flat destinations + staff בקרה, bottom on phones; desktop keeps topnav) */
#site-tabbar{display:none;}
@media (max-width:700px){
  #site-tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;z-index:40;
    background:var(--card);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);}
  #site-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 0 5px;min-height:50px;color:var(--muted);font-size:11px;text-decoration:none;}
  #site-tabbar a.on{color:var(--accent);font-weight:600;}
  #site-tabbar .tb-i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom));}
  /* the bar replaces the topnav LINKS on phones; account controls remain */
  .topnav .nav-in > a{display:none;}
}