/* ==========================================================================
   Sepia / Reading mode Bootstrap 5 Theme
   A Kindle-style theme for long-form content.
   Include AFTER bootstrap.min.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;0,7..72,700;1,7..72,400&display=swap');

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Bootstrap variable overrides)
   -------------------------------------------------------------------------- */
:root {
  /* Sepia Palette Tokens */
  --sepia-terracotta: #9e472a;
  --sepia-terracotta-hover: #82381f;
  --sepia-coffee: #786654;
  --sepia-paper: #f4ebd0;
  --sepia-card: #eae0c2;
  --sepia-ink: #3b2f23;
  --sepia-border: #d8cbab;

  /* Bootstrap Primary Overrides (Light Mode) */
  --bs-primary: var(--sepia-terracotta);
  --bs-primary-rgb: 158, 71, 42;
  --bs-secondary: var(--sepia-coffee);
  --bs-secondary-rgb: 120, 102, 84;
  --bs-success: #3f6e52;
  --bs-success-rgb: 63, 110, 82;
  --bs-info: #356b8c;
  --bs-info-rgb: 53, 107, 140;
  --bs-warning: #a36f28;
  --bs-warning-rgb: 163, 111, 40;
  --bs-danger: #a63a3a;
  --bs-danger-rgb: 166, 58, 58;
  --bs-light: #eae0c2;
  --bs-light-rgb: 234, 224, 194;
  --bs-dark: #3b2f23;
  --bs-dark-rgb: 59, 47, 35;

  /* Body & Surface */
  --bs-body-bg: var(--sepia-paper);
  --bs-body-color: var(--sepia-ink);
  --bs-tertiary-bg: var(--sepia-card);
  --bs-border-color: var(--sepia-border);

  /* Typography */
  --bs-font-sans-serif: 'Literata', Lora, Georgia, serif;
  --bs-body-font-size: 1.05rem;
  --bs-body-line-height: 1.65;

  /* Components Globals */
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;

  /* Focus Ring */
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-color: rgba(158, 71, 42, 0.3);

  /* Navbar */
  --bs-navbar-bg: #eae0c2;
}

[data-bs-theme="dark"] {
  --sepia-amber: #d9923b;
  --sepia-amber-hover: #e5a452;

  --bs-primary: var(--sepia-amber);
  --bs-primary-rgb: 217, 146, 59;
  --bs-secondary: #a89b8c;
  --bs-secondary-rgb: 168, 155, 140;
  --bs-success: #5f9e77;
  --bs-success-rgb: 95, 158, 119;
  --bs-info: #5d97b8;
  --bs-info-rgb: 93, 151, 184;
  --bs-warning: #e0aa53;
  --bs-warning-rgb: 224, 170, 83;
  --bs-danger: #c95b5b;
  --bs-danger-rgb: 201, 91, 91;

  --bs-body-bg: #28221b;
  --bs-body-color: #e6ded1;
  --bs-tertiary-bg: #332b23;
  --bs-border-color: #453a2f;

  --bs-light: #332b23;
  --bs-dark: #1f1a14;

  --bs-navbar-bg: #2e2720;
  --bs-focus-ring-color: rgba(217, 146, 59, 0.35);
}

/* --------------------------------------------------------------------------
   2. Base & Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  color: var(--bs-body-color);
  letter-spacing: -0.2px;
}

a {
  color: var(--bs-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  opacity: 0.85;
}

blockquote {
  border-left: 3px solid var(--bs-primary);
  padding-left: 1rem;
  font-style: italic;
  color: var(--bs-secondary-color);
}

/* --------------------------------------------------------------------------
   3. Buttons & Controls
   -------------------------------------------------------------------------- */
.btn {
  font-weight: 600;
  border-radius: var(--bs-border-radius);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--sepia-terracotta-hover);
  --bs-btn-hover-border-color: var(--sepia-terracotta-hover);
}

.navbar {
  background-color: var(--bs-navbar-bg) !important;
  border-bottom: 1px solid var(--bs-border-color);
}

.card {
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
}

.card-header {
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.03);
}

.form-control, .form-select {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
}