/* ==========================================================================
   KodeshWay — shared components (web, PARCHMENT)
   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(196, 144, 64, 0.30); color: var(--kw-label); } /* warm gold */
::-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-accent-deep); /* deep gold — the app's eyebrows are gold, never grey */
}

.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);
  /* The iOS parchment card signature: a 0.5px gold hairline. */
  border: 0.5px solid var(--kw-card-border);
}

/* Gilt dark-inset card — the app's hero card (Trinity / Continue / Story):
   deep warm ink, gold hairline, warm-gold foreground pairs. Mode-invariant
   surface, exactly like KodeshWayCardDarkInset. */
.kw-inset-card {
  background: var(--kw-inset);
  border-radius: var(--kw-r-lg);
  border: 0.5px solid var(--kw-inset-border);
  padding: var(--kw-card-pad);
  color: var(--kw-inset-text);
  box-shadow: var(--kw-card-shadow);
}
.kw-inset-card .kw-inset-accent { color: var(--kw-inset-accent); }
.kw-inset-card .kw-inset-muted  { color: var(--kw-inset-muted); }
/* 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); min-height keeps a comfortable tap
     target. iOS button voice: UPPERCASE, tracked, GOLD — secondary buttons
     are a bare gold hairline on the warm surface (the app's "CONTINUE THE
     WALK" capsule), primary is the solid gold pill with deep-ink text
     (the app's "RESUME READING →"). */
  padding: 14px 24px;
  min-height: 50px;
  border-radius: var(--kw-r-capsule);
  border: 1px solid var(--kw-rule-gold);
  background: transparent;
  color: var(--kw-accent);
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-cta);
  font-weight: 600;
  letter-spacing: var(--kw-track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--kw-dur-quick) var(--kw-ease),
              background var(--kw-dur-quick) var(--kw-ease),
              border-color var(--kw-dur-quick) var(--kw-ease);
}
.kw-btn:hover { border-color: var(--kw-accent); }
.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); color: var(--kw-label-on-accent); }

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

/* LABEL ──────── — the app's KodeshWaySectionDivider: gold small-caps
   label with a trailing gold hairline. For section headers inside cards
   and left-composed layouts (the centred break uses .kw-diamond-rule). */
.kw-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--kw-font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: var(--kw-accent);
  white-space: nowrap;
}
.kw-section-divider::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: var(--kw-rule-gold);
}

/* Gold-bar quote — the app's teaching/reflection block: a gold left bar
   with Georgia-italic body (the "WHY THIS, TODAY" / Three Persons card
   voice). */
.kw-quote-bar {
  border-left: 3px solid var(--kw-accent);
  padding-left: 16px;
  font-family: var(--kw-font-verse, Georgia, serif);
  font-style: italic;
  line-height: 1.6;
  color: var(--kw-label);
}


/* Gilt corner brackets — the app's Shabbat countdown frame: gold L-strokes
   at all four corners, sides open. Apply to a block; pairs beautifully with
   serif numerals and small-caps gold labels inside. */
.kw-corner-frame {
  position: relative;
  padding: 22px 24px;
}
.kw-corner-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--kw-accent), var(--kw-accent)) 0 0 / 22px 1.5px,
    linear-gradient(var(--kw-accent), var(--kw-accent)) 0 0 / 1.5px 22px,
    linear-gradient(var(--kw-accent), var(--kw-accent)) 100% 0 / 22px 1.5px,
    linear-gradient(var(--kw-accent), var(--kw-accent)) 100% 0 / 1.5px 22px,
    linear-gradient(var(--kw-accent), var(--kw-accent)) 0 100% / 22px 1.5px,
    linear-gradient(var(--kw-accent), var(--kw-accent)) 0 100% / 1.5px 22px,
    linear-gradient(var(--kw-accent), var(--kw-accent)) 100% 100% / 22px 1.5px,
    linear-gradient(var(--kw-accent), var(--kw-accent)) 100% 100% / 1.5px 22px;
  background-repeat: no-repeat;
  opacity: 0.85;
}

/* Arched gold frame over imagery — the illuminated-manuscript arch the
   app's artwork carries (IMAGE_CANON: gold arch frame). Chapel-window
   crown, gold hairline ring, breathing gap to the art. */
.kw-arch {
  --kw-arch-r: var(--kw-r-lg);
  position: relative;
  display: block;
  border-radius: 50% 50% var(--kw-arch-r) var(--kw-arch-r) / 22% 22% var(--kw-arch-r) var(--kw-arch-r);
  border: 1px solid var(--kw-rule-gold);
  padding: 7px;
}
.kw-arch > img,
.kw-arch > picture,
.kw-arch > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50% 50% calc(var(--kw-arch-r) - 5px) calc(var(--kw-arch-r) - 5px) / 22% 22% calc(var(--kw-arch-r) - 5px) calc(var(--kw-arch-r) - 5px);
}

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

/* ──── ❖ TITLE ❖ ──── — the app's KodeshWayDiamondTitleRule: a centred
   small-caps gold title bracketed by two Georgia ❖ diamonds, hairlines
   running to the edges (0.5px gold @45%). Apply to a heading element; the
   glyphs and lines are pseudo-elements, so markup stays a plain title.
   Faithful to iOS: label 10px semibold +0.18em uppercase gold, ❖ 12px
   Georgia gold, 10px gaps. */
.kw-diamond-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kw-font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: var(--kw-accent);
  text-align: center;
  white-space: nowrap;
}
.kw-diamond-rule::before,
.kw-diamond-rule::after {
  content: "❖";
  flex: 1;
  min-width: 24px;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--kw-accent);
  background: linear-gradient(var(--kw-rule-gold), var(--kw-rule-gold))
              left 50% / calc(100% - 22px) 0.5px no-repeat;
}
.kw-diamond-rule::before { text-align: right; }
.kw-diamond-rule::after {
  text-align: left;
  background-position: right 50%;
}

/* ---- 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; }