/**
 * Global book cover dimensions — single source of truth for responsive cover boxes.
 *
 * - Desktop / large (≥1024): shared “large” grid + carousel covers (All Books, carousels, ranked list).
 * - Mobile / small (≤767): nominal Past BOTD-style grid (~110×165, 2∶3).
 * - Tablet / medium (768–1023): between small and large.
 *
 * Load order: after dbc-breakpoints.css. Use var(--dbc-book-cover-w), var(--dbc-book-cover-h),
 * var(--dbc-book-cover-radius) in components (also aliased as --dbc-all-books-cover-* on .dbc-all-books).
 *
 * Named tier aliases (--dbc-book-cover-mobile-*, --dbc-book-cover-tablet-*, --dbc-book-cover-desktop-*)
 * and semantic sm / md / lg (same values) let compact UIs pin sizes explicitly.
 *
 * Viewport tiers align with DBC_BP_MOBILE (767) and DBC_BP_TABLET (1024).
 *
 * Shelf bookmark ribbons: constants only below (--dbc-bod-ribbon-mobile-* = small cover ~114px-wide,
 * *-tablet-* = medium ~132px, *-desktop-* = large ~133px+). Which set applies is chosen in style.css
 * via @container dbc-shelf-cover from each .dbc-bod-bookmark-wrap’s inline-size (actual cover width),
 * not from viewport.
 */

:root {
  /* Named tiers — reuse in “compact” UIs that only use mobile + tablet sizes (e.g. search dropdown). */
  --dbc-book-cover-mobile-w: 114px;
  --dbc-book-cover-mobile-h: 171px;
  --dbc-book-cover-tablet-w: 132px;
  --dbc-book-cover-tablet-h: 194px;
  --dbc-book-cover-desktop-w: 136px;
  --dbc-book-cover-desktop-h: 204px;

  /* Semantic size tiers (sm/md/lg = mobile/tablet/desktop px). */
  --dbc-book-cover-sm-w: var(--dbc-book-cover-mobile-w);
  --dbc-book-cover-sm-h: var(--dbc-book-cover-mobile-h);
  --dbc-book-cover-md-w: var(--dbc-book-cover-tablet-w);
  --dbc-book-cover-md-h: var(--dbc-book-cover-tablet-h);
  --dbc-book-cover-lg-w: var(--dbc-book-cover-desktop-w);
  --dbc-book-cover-lg-h: var(--dbc-book-cover-desktop-h);

  --dbc-book-cover-w: var(--dbc-book-cover-desktop-w);
  --dbc-book-cover-h: var(--dbc-book-cover-desktop-h);
  --dbc-book-cover-radius: 12px;

  /* Small-cover ribbon (nominal ~114px cover width) */
  --dbc-bod-ribbon-mobile-w: 26px;
  --dbc-bod-ribbon-mobile-h: 31px;
  --dbc-bod-ribbon-mobile-font-size: 16px;
  --dbc-bod-ribbon-mobile-left: 4px;
  --dbc-bod-ribbon-mobile-popup-top: 36px;
  --dbc-bod-ribbon-mobile-icon-box: 1em;
  --dbc-bod-ribbon-mobile-icon-bg-size: 82%;

  /* Medium-cover ribbon (nominal ~132px cover width) */
  --dbc-bod-ribbon-tablet-w: 28px;
  --dbc-bod-ribbon-tablet-h: 34px;
  --dbc-bod-ribbon-tablet-font-size: 18px;
  --dbc-bod-ribbon-tablet-left: 5px;
  --dbc-bod-ribbon-tablet-popup-top: 38px;
  --dbc-bod-ribbon-tablet-icon-box: 1.08em;
  --dbc-bod-ribbon-tablet-icon-bg-size: 86%;

  /* Large-cover ribbon (nominal ~133px+ cover width; see @container dbc-shelf-cover in style.css) */
  --dbc-bod-ribbon-desktop-w: 32px;
  --dbc-bod-ribbon-desktop-h: 39px;
  --dbc-bod-ribbon-desktop-font-size: 20px;
  --dbc-bod-ribbon-desktop-left: 6px;
  --dbc-bod-ribbon-desktop-popup-top: 42px;
  /* Large tier only: slightly smaller plus/check glyphs vs former 1.12em / 90%. */
  --dbc-bod-ribbon-desktop-icon-box: 1.06em;
  --dbc-bod-ribbon-desktop-icon-bg-size: 84%;
}

@media (max-width: 767px) {
  :root {
    --dbc-book-cover-w: var(--dbc-book-cover-mobile-w);
    --dbc-book-cover-h: var(--dbc-book-cover-mobile-h);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --dbc-book-cover-w: var(--dbc-book-cover-tablet-w);
    --dbc-book-cover-h: var(--dbc-book-cover-tablet-h);
  }
}