/* ============================================================
   Book Reader Pro — Design Tokens (Premium)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Assistant:wght@400;600;800&display=swap');

:root {
  /* ---- Cream / Light palette (default) ---- */
  --brp-bg:              #faf7f2;
  --brp-bg-soft:         #f4ebd7;
  --brp-surface:         #ffffff;
  --brp-surface-elev:    #fbf8f3;

  --brp-text:            #1a1614;
  --brp-text-soft:       #4a4540;
  --brp-text-muted:      #8a8580;

  --brp-border:          #e8dfcf;
  --brp-border-soft:     rgba(232, 223, 207, 0.5);

  --brp-gold:            #c9a961;
  --brp-gold-light:      #e5d4a1;
  --brp-gold-dark:       #8c7232;
  --brp-gold-glow:       rgba(201, 169, 97, 0.3);

  --brp-error:           #b03a3a;
  --brp-error-soft:      rgba(176, 58, 58, 0.08);
  --brp-success:         #4a7c4a;
  --brp-success-soft:    rgba(74, 124, 74, 0.08);

  /* ---- Shadows ---- */
  --brp-shadow-sm:       0 1px 2px rgba(26, 22, 20, 0.04), 0 1px 4px rgba(26, 22, 20, 0.04);
  --brp-shadow-md:       0 4px 12px rgba(26, 22, 20, 0.06), 0 2px 6px rgba(26, 22, 20, 0.04);
  --brp-shadow-lg:       0 12px 32px rgba(26, 22, 20, 0.08), 0 4px 12px rgba(26, 22, 20, 0.04);
  --brp-shadow-xl:       0 24px 64px rgba(26, 22, 20, 0.12), 0 8px 24px rgba(26, 22, 20, 0.06);
  --brp-shadow-gold:     0 8px 24px rgba(201, 169, 97, 0.25);

  /* ---- Typography ---- */
  --brp-font-display:    'Assistant', 'Heebo', system-ui, -apple-system, sans-serif;
  --brp-font-body:       'Heebo', system-ui, -apple-system, sans-serif;
  --brp-font-serif:      'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --brp-font-mono:       'Courier New', monospace;

  /* ---- Radii ---- */
  --brp-radius-sm:       8px;
  --brp-radius-md:       12px;
  --brp-radius-lg:       16px;
  --brp-radius-xl:       24px;
  --brp-radius-pill:     999px;

  /* ---- Spacing ---- */
  --brp-space-1:         4px;
  --brp-space-2:         8px;
  --brp-space-3:         12px;
  --brp-space-4:         16px;
  --brp-space-5:         24px;
  --brp-space-6:         32px;
  --brp-space-7:         48px;
  --brp-space-8:         64px;

  /* ---- Motion ---- */
  --brp-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --brp-ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --brp-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --brp-ease-spring:     cubic-bezier(0.32, 0.72, 0, 1);

  --brp-dur-fast:        150ms;
  --brp-dur-med:         300ms;
  --brp-dur-slow:        500ms;
  --brp-dur-page:        350ms;

  /* ---- Layout ---- */
  --brp-content-max:     720px;
  --brp-header-h:        72px;
  --brp-footer-h:        80px;
}

/* ============================================================
   Dark Mode
   ============================================================ */
.brp-dark-mode,
[data-brp-theme="dark"] {
  --brp-bg:              #1a1614;
  --brp-bg-soft:         #221d1a;
  --brp-surface:         #2a2421;
  --brp-surface-elev:    #322b27;

  --brp-text:            #f4ebd7;
  --brp-text-soft:       #d4c8b1;
  --brp-text-muted:      #8a8074;

  --brp-border:          #3a322c;
  --brp-border-soft:     rgba(58, 50, 44, 0.5);

  --brp-gold:            #d4b876;
  --brp-gold-light:      #e8d49a;
  --brp-gold-dark:       #a18649;
  --brp-gold-glow:       rgba(212, 184, 118, 0.4);

  --brp-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.3);
  --brp-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.35);
  --brp-shadow-lg:       0 12px 32px rgba(0, 0, 0, 0.45);
  --brp-shadow-xl:       0 24px 64px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-brp-theme="light"]) {
    --brp-bg:              #1a1614;
    --brp-bg-soft:         #221d1a;
    --brp-surface:         #2a2421;
    --brp-text:            #f4ebd7;
    --brp-text-soft:       #d4c8b1;
  }
}

/* ============================================================
   Fullscreen mode — kills the theme chrome on BRP pages
   Body gets `.brp-fullscreen` via PHP filter on every plugin page.
   ============================================================ */
body.brp-fullscreen #site-header,
body.brp-fullscreen .site-header,
body.brp-fullscreen .page-header,
body.brp-fullscreen .entry-header,
body.brp-fullscreen .site-branding,
body.brp-fullscreen .site-footer,
body.brp-fullscreen .entry-title,
body.brp-fullscreen #wpadminbar,
body.brp-fullscreen #userway_buttons_container,
body.brp-fullscreen iframe[id^="userway"],
body.brp-fullscreen div[class*="userway"],
body.brp-fullscreen div[class*="UserWay"],
body.brp-fullscreen .uwy,
body.brp-fullscreen div[class*="manage__notice"],
body.brp-fullscreen #cookie-notice,
body.brp-fullscreen .cookie-notice {
  display: none !important;
  visibility: hidden !important;
}

/* Push the BRP content all the way to the top — no theme margin */
body.brp-fullscreen { margin-top: 0 !important; padding-top: 0 !important; background: var(--brp-bg, #faf7f2); }
body.brp-fullscreen html.admin-bar { margin-top: 0 !important; }
body.brp-fullscreen .site-main,
body.brp-fullscreen .entry-content,
body.brp-fullscreen main { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* ============================================================
   Resets scoped to plugin
   ============================================================ */
.brp-login-wrap,
.brp-library-wrap,
.brp-reader-wrap,
.brp-noaccess-wrap {
  font-family: var(--brp-font-body);
  color: var(--brp-text);
  background: var(--brp-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.brp-login-wrap *,
.brp-library-wrap *,
.brp-reader-wrap *,
.brp-noaccess-wrap * {
  box-sizing: border-box;
}

.brp-login-wrap a,
.brp-library-wrap a,
.brp-reader-wrap a {
  color: var(--brp-gold-dark);
  transition: color var(--brp-dur-fast) var(--brp-ease);
}

.brp-login-wrap a:hover,
.brp-library-wrap a:hover,
.brp-reader-wrap a:hover {
  color: var(--brp-gold);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}