/* ==========================================================================
   KodeshWay — shared components (web, stock-iOS)
   CANONICAL SOURCE — sync via build/sync_design.sh.

   Minimal shared primitives so .com and .org render chrome identically.
   Page layout stays in each site's own stylesheet — this file is the shared
   look (surfaces, glass nav, cards, eyebrows, verse blocks, buttons), not the
   page grid.
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
.kw-root {
  background: var(--kw-bg);
  color: var(--kw-label);
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-body);
  line-height: var(--kw-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Document chrome (stock) --------------------------------------------
   Overrides legacy gold/crimson scrollbar, selection and focus rings on any
   page that adopts the design system. Loads AFTER the site's global.css so
   these win. Only affects adopting pages (others keep their own chrome). */
::selection { background: rgba(10, 132, 255, 0.30); color: var(--kw-label); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--kw-fill);
  border-radius: var(--kw-r-xs);
}
::-webkit-scrollbar-thumb:hover { background: var(--kw-separator); }
* { scrollbar-width: thin; scrollbar-color: var(--kw-fill) transparent; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--kw-accent);
  outline-offset: 2px;
}

/* ---- Type roles ---------------------------------------------------------- */
.kw-page-title {
  font-family: var(--kw-font-serif);
  font-size: var(--kw-fs-page-title);
  line-height: var(--kw-lh-tight);
  font-weight: 400;
  color: var(--kw-label);
}
.kw-card-title {
  font-size: var(--kw-fs-card);
  font-weight: 500;
  color: var(--kw-label);
}
.kw-card-title--large { font-size: var(--kw-fs-card-large); }

.kw-subtitle {
  font-family: var(--kw-font-serif);
  font-style: italic;
  font-size: var(--kw-fs-body-2);
  color: var(--kw-label-2);
}

.kw-eyebrow {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--kw-track-eyebrow);
  color: var(--kw-label-3);
}

.kw-body-2  { font-size: var(--kw-fs-body-2); color: var(--kw-label-2); }
.kw-small   { font-size: var(--kw-fs-small); color: var(--kw-label-3); }

/* ---- Nav (glass chrome) -------------------------------------------------- */
.kw-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--kw-space-lg);
  padding: var(--kw-space-md) var(--kw-page-h);
  /* composes with .kw-glass */
}
.kw-nav__brand {
  font-family: var(--kw-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--kw-track-label);
  font-size: var(--kw-fs-pill);
  color: var(--kw-label);
}
.kw-nav__link {
  font-size: var(--kw-fs-pill);
  text-transform: uppercase;
  letter-spacing: var(--kw-track-caps);
  color: var(--kw-label-3);
  text-decoration: none;
  transition: color var(--kw-dur-quick) var(--kw-ease);
}
.kw-nav__link:hover,
.kw-nav__link[aria-current="page"] { color: var(--kw-label); }

/* ---- Card (solid reading surface — never glass) --------------------------
   IOS26_GLASS_MIGRATION.md §6: glass needs imagery/gradient behind it to
   refract. Over a flat single-colour page a glass card reads as muddy fill —
   worse than opaque — and a neutral-tinted glass card VANISHES on a white
   (light-mode) systemBackground. So content cards stay SOLID and just take the
   ios26 radius; glass is reserved for the floating nav (which refracts the
   content scrolling under it) and for surfaces that sit over the aurora/imagery. */
.kw-card {
  background: var(--kw-surface);
  border-radius: var(--kw-r-lg);
  padding: var(--kw-card-pad);
  box-shadow: var(--kw-card-shadow);
}
/* iOS-26 radius — enforce the 76px min on both axes so 30px renders fully. */
.kw-card--ios26,
.kw-ios26 {
  border-radius: var(--kw-r-ios26);
  min-height: var(--kw-r-ios26-min);
  min-width: var(--kw-r-ios26-min);
}
.kw-capsule { border-radius: var(--kw-r-capsule); }

/* ---- Verse block --------------------------------------------------------- */
.kw-verse {
  font-family: var(--kw-font-serif);
  font-size: var(--kw-fs-card);
  line-height: var(--kw-lh-prose);
  color: var(--kw-label);
}
.kw-verse__ref {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-pill);
  text-transform: uppercase;
  letter-spacing: var(--kw-track-label);
  color: var(--kw-label-3);
}

/* ---- Buttons ------------------------------------------------------------- */
.kw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kw-space-sm);
  /* True capsule (radius = height/2), NOT the 30px ios26 token — a fixed 30px
     on a short button exceeds half-height and breaks at the ends
     (IOS26_GLASS_MIGRATION.md §3). min-height keeps a comfortable tap target. */
  padding: 14px 22px;
  min-height: 50px;
  border-radius: var(--kw-r-capsule);
  border: 1px solid var(--kw-separator);
  background: var(--kw-fill);
  color: var(--kw-label);
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-cta);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--kw-dur-quick) var(--kw-ease),
              background var(--kw-dur-quick) var(--kw-ease);
}
.kw-btn:active { transform: scale(0.96); }
.kw-btn--prominent {
  background: var(--kw-accent);
  border-color: transparent;
  color: var(--kw-label-on-accent);
}
.kw-btn--prominent:hover { background: var(--kw-accent-hover); }

/* ---- Hebrew script ------------------------------------------------------- */
.kw-hebrew {
  font-family: var(--kw-font-hebrew);
  direction: rtl;
  unicode-bidi: isolate;
}

/* ---- Divider ------------------------------------------------------------- */
.kw-rule {
  border: 0;
  height: 1px;
  background: var(--kw-separator);
}

/* ---- Light/dark toggle (injected by theme.js into [data-theme-slot]) ----- */
.kw-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--kw-r-capsule);
  border: 1px solid var(--kw-separator);
  background: var(--kw-fill);
  color: var(--kw-label-2);
  cursor: pointer;
  transition: color var(--kw-dur-quick) var(--kw-ease), border-color var(--kw-dur-quick) var(--kw-ease);
}
.kw-theme-toggle:hover { color: var(--kw-label); border-color: var(--kw-label-3); }
.kw-theme-toggle svg { width: 18px; height: 18px; }
.kw-theme-toggle .kw-icon-moon { display: none; }
[data-theme="light"] .kw-theme-toggle .kw-icon-sun { display: none; }
[data-theme="light"] .kw-theme-toggle .kw-icon-moon { display: block; }