/* public/css/base.css — reset, type scale, RTL rules, focus rings, motion / transparency preferences
   (docs/UI-GUIDE.md §2, §3, §7). Logical properties only; the page is <html lang="he" dir="rtl">. */

/* derived tokens (not part of the theme list in tokens.css) */
:root {
  /* --neutral-bg and --soft-text moved into tokens.css when dark mode arrived: both are colours, and every colour
     has to exist in BOTH palettes or it lands white-on-white. What stays here is genuinely non-colour. */
  --neutral-ink:var(--ink);
  --focus:var(--brand);
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* Tells the browser which way round this page is, so its own furniture — form controls, scrollbars, the
     spelling of a date picker — follows. It is NOT a token: it is a declaration about the document, and it has to
     track data-theme exactly the way the palette does. */
  color-scheme: light;
  --content-max:1200px;
  --topbar-h:64px;
  --bottom-nav-h:64px;
}

:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; scroll-padding-block-start: calc(var(--topbar-h) + 12px); }
body {
  margin: 0; min-height: 100%;
  font-family: var(--font); font-size: 17px; line-height: 1.5; font-weight: 400;
  color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-align: start; overflow-x: hidden; overflow-wrap: anywhere;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; margin: 0; }
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
strong, b { font-weight: 700; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: .92em; }
hr { border: 0; border-block-start: 1px solid var(--hairline); margin-block: var(--space-4); }
table { border-collapse: separate; border-spacing: 0; }
::selection { background: var(--tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* type scale (§2) */
.display { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.015em; }
.h1 { font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.012em; }
.h2 { font-size: 24px; line-height: 1.2; font-weight: 700; }
.h3 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.body-text { font-size: 17px; line-height: 1.5; font-weight: 400; }
.small { font-size: 14.5px; line-height: 1.4; font-weight: 500; }
.micro { font-size: 13px; line-height: 1.3; font-weight: 600; }
.soft { color: var(--soft-text); }
.muted { color: var(--body); }
.ink { color: var(--ink); }
.brand-text { color: var(--brand-deep); }
@media (max-width: 479px) {
  .display { font-size: 36px; }
  .h1 { font-size: 28px; }
}

/* numbers and money (§2, §3): tabular digits, LTR isolate so "-1,234.56 ₪" never flips */
.tabular, .num { font-variant-numeric: tabular-nums; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }
.neg { color: var(--bad-ink); }
.pos { color: var(--ok-ink); }
.unknown { color: var(--bad-ink); font-weight: 700; white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }
.text-end { text-align: end; }
.text-center { text-align: center; }
.text-start { text-align: start; }
.formula { font-family: var(--mono); font-size: 13px; color: var(--body); direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: pre-wrap; text-align: start; }

/* icons (§5): inline SVG sprite, stroke 1.75, 20px; only directional icons mirror in RTL */
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; stroke-width: 1.5; }
[dir=rtl] .icon-dir { transform: scaleX(-1); }

/* a11y helpers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* simple / advanced mode (§8): .adv is visible only when <body class="advanced"> */
body:not(.advanced) .adv { display: none !important; }
body.advanced .simple-only { display: none !important; }

/* motion preferences (§7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
    transition-property: opacity, background-color, color, border-color, box-shadow, outline-color !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .skeleton { animation: none !important; }
  .chart-bar, .chart-line { animation: none !important; transform: none !important; stroke-dashoffset: 0 !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .bottom-nav { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}