/* ═══════════════════════════════════════════════════
   Penned. BOOKSTORE — Base Styles (css/penned.css)
   ═══════════════════════════════════════════════════ */
:root {
  --bg:           #FAF7F2;
  --bg-card:      #FFFFFF;
  --bg-dark:      #1A1A1A;
  --text:         #2C2C2C;
  --text-muted:   #6F6F6F;
  --accent:       #C4956A;
  --accent-hover: #A87B55;
  --border:       #E8E2D9;
  --star:         #C4956A;
  --star-empty:   #D9D3CA;
  --heart:        #E25555;
  --success:      #4A8C5A;
  --danger:       #C44A4A;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-serif:   'Libre Baskerville', Georgia, serif;
  --font-mono:    'DM Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ── WCAG: Skip Link ── */
.skip-link {
  position: absolute; top: -100%; left: 50%;
  transform: translateX(-50%);
  background: var(--accent); color: #fff;
  padding: 0.5rem 1.5rem; border-radius: 0 0 8px 8px;
  z-index: 9999; font-weight: 600; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; outline: 3px solid var(--accent); }

/* ── NAVBAR ── */
.chp-navbar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0.75rem 0; }

.chp-logo {
  font-family: var(--font-serif); font-size: 1.5rem;
  font-weight: 700; color: var(--text) !important; text-decoration: none;
}
.chp-dot { color: var(--accent); }
.chp-e { font-family: var(--font-serif); font-style: normal; }
.chp-d { font-family: var(--font-serif); font-style: italic; }
.chp-footer-brand .chp-e,
.chp-footer-brand .chp-d { color: #fff; }

.chp-nav-link {
  font-family: var(--font-mono); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted) !important; padding: 0.5rem 1rem !important;
  transition: color 0.2s;
}
.chp-nav-link:hover, .chp-nav-link:focus { color: var(--accent) !important; }

/* ── BUTTONS ── */
.chp-btn-accent {
  background: #7A4F2A; color: #fff !important; border: none;
  border-radius: 4px; font-family: var(--font-mono); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  transition: background 0.2s; text-decoration: none;
}
.chp-btn-accent:hover, .chp-btn-accent:focus {
  background: #5C3A1E; color: #fff !important;
}

/* ── SECTION HEADINGS ── */
.chp-section-title {
  font-family: var(--font-sans); font-weight: 800;
  font-size: 2rem; color: var(--text);
}
.chp-section-title em, .chp-section-title .chp-italic {
  font-family: var(--font-serif); font-style: italic;
  color: #7A4F2A; font-weight: 400;
}

/* ── CARDS ── */
.chp-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.25rem; transition: box-shadow 0.2s;
}
.chp-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

/* ── STAR DISPLAY ── */
.stars-display { display: inline-flex; gap: 2px; }
.stars-display .bi-star-fill, .stars-display .bi-star-half { color: var(--star); }
.stars-display .bi-star { color: var(--star-empty); }

/* ── FORMS ── */
.chp-form-control {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.6rem 0.8rem; font-family: var(--font-sans);
  background: var(--bg); transition: border-color 0.2s, box-shadow 0.2s;
}
.chp-form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196,149,106,0.15); outline: none;
}
.chp-label {
  font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 0.3rem;
}

/* ── LOGIN PROMPT MODAL ── */
.login-prompt-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 1050; display: flex; align-items: center; justify-content: center;
}
.login-prompt-modal {
  background: var(--bg-card); border-radius: 12px; padding: 2rem;
  max-width: 400px; width: 90%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* ── FOOTER ── */
.chp-footer { background: var(--bg-dark); color: #ccc; margin-top: 4rem; }
.chp-footer-brand { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.chp-footer-text  { font-size: 0.85rem; color: #999; line-height: 1.6; }
.chp-footer-heading { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: #666; margin-bottom: 0.75rem; }
.chp-footer-links { list-style: none; padding: 0; margin: 0; }
.chp-footer-links li { margin-bottom: 0.4rem; }
.chp-footer-links a { color: #aaa; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.chp-footer-links a:hover { color: var(--accent); }
.chp-footer-bottom { border-top: 1px solid #333; padding: 1.5rem 0; text-align: center; font-size: 0.75rem; color: #666; }

/* ── RESPONSIVE & FOCUS ── */
@media (max-width: 768px) { .chp-section-title { font-size: 1.5rem; } }
*:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
body.dark-mode {
  --text-muted: #9a9a9a;
  --accent:     #c49a6c;
  --star:       #c49a6c;
}

/* == Dark mode contrast fixes == */
body.dark-mode .chp-section-title em,
body.dark-mode .chp-section-title .chp-italic {
    color: #f0a050;
}

body.dark-mode .chp-form-control,
body.dark-mode .form-control {
    background: #2a2520;
    color: #e8e2d9;
    border-color: #3e3830;
}
body.dark-mode .chp-form-control:focus,
body.dark-mode .form-control:focus {
    background: #2a2520;
    color: #e8e2d9;
    border-color: var(--accent);
}

/* == Dark mode contrast fixes == */
body.dark-mode .danger-zone .settings-section-title,
body.dark-mode .btn-danger-outline {
    color: #ef5350;
}
body.dark-mode .btn-danger-outline {
    border-color: #ef5350;
}
body.dark-mode .btn-danger-outline:hover {
    background: #ef5350;
    color: #fff;
}