/* KDL Library — app shell.
   Everything visual lives on the elements themselves (1:1 with the approved
   prototypes). This file only holds the reset, the theme variables, the two
   keyframes and the press states that a style attribute cannot express. */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  transition: background .6s ease;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* Light is the default; the boot script stamps data-theme before first paint. */
:root,
:root[data-theme="light"] {
  --bg: #FBF6E9;
  --primary: #57250a;              /* header, home quote, attribution */
  --body: #000000;                 /* reader body + quote text */
  --muted: rgba(87,37,10,0.62);    /* splash sub-wordmark */
  --label: rgba(87,37,10,0.62);    /* quote book label */
  --tile-shadow: 0 8px 24px rgba(214,102,26,0.12), inset 0 1px 0 rgba(255,255,255,0.55);
  --pill-bg: linear-gradient(135deg,rgba(255,255,255,0.55),rgba(255,255,255,0.28));
}

:root[data-theme="dark"] {
  --bg: #14120F;
  --primary: #FFFFFF;
  --body: #FFFFFF;
  --muted: rgba(255,255,255,0.62);
  --label: rgba(255,255,255,0.6);
  --tile-shadow: 0 8px 24px rgba(255,150,60,0.12), 0 0 22px rgba(255,140,50,0.07), inset 0 1px 0 rgba(255,255,255,0.3);
  --pill-bg: linear-gradient(135deg,rgba(58,54,48,0.95),rgba(40,37,32,0.85));
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Native scrollbar is hidden everywhere; the glass indicator replaces it. */
.kdl-scroll::-webkit-scrollbar { width: 0; height: 0 }

@keyframes kdlLetterIn {
  from { opacity: 0; transform: translateY(4px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* Home tiles — smooth single lift that HOLDS while the finger rests, then
   eases back on release. Nothing springy. */
.kdl-tile:hover,
.kdl-tile:focus,
.kdl-tile.is-pressed {
  transform: translateY(-8px);
  box-shadow: 0 18px 34px rgba(214,102,26,0.2), inset 0 1px 0 rgba(255,255,255,0.65);
  outline: none;
}
.kdl-tile.is-pressed {
  transform: translateY(-8px) scale(.985);
  box-shadow: 0 12px 26px rgba(214,102,26,0.22), inset 0 1px 0 rgba(255,255,255,0.65);
}

/* Cover cards — same feel, 6px, no shadow change (flat covers). */
.kdl-card:hover,
.kdl-card.is-pressed { transform: translateY(-6px) }
.kdl-card.is-pressed { transform: translateY(-6px) scale(.985) }

.kdl-tile:focus-visible, .kdl-card:focus-visible { outline: none }