/* ============================================
   Commonplace — Custom Styles
   A bookish, paper-and-ink design system
   ============================================ */

/* --- Color Palette (CSS Custom Properties) --- */
:root {
  /* Base — warm paper & ink */
  --color-bg: #F4EFE4;
  --color-surface: #FBF8F1;
  --color-text: #2B2620;
  --color-text-muted: #6F665A;
  --color-border: #E3DAC9;

  /* Primary accent — marginalia rust */
  --color-accent: #A23B2D;
  --color-accent-soft: rgba(162, 59, 45, 0.10);

  /* Category hues (laws) */
  --color-cat-general: #A23B2D;
  --color-cat-complex: #2563EB;
  --color-cat-economy: #15803D;
  --color-cat-software: #7C3AED;

  --color-scrollbar: #CDBFA6;
}

.dark {
  --color-bg: #17140F;
  --color-surface: #211D17;
  --color-text: #ECE3D3;
  --color-text-muted: #A99C88;
  --color-border: #352F25;

  --color-accent: #E07856;
  --color-accent-soft: rgba(224, 120, 86, 0.14);

  --color-cat-general: #E07856;
  --color-cat-complex: #60A5FA;
  --color-cat-economy: #4ADE80;
  --color-cat-software: #A78BFA;

  --color-scrollbar: #4A4234;
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
}

body {
  background-image: radial-gradient(var(--color-border) 0.5px, transparent 0.5px);
  background-size: 22px 22px;
  background-attachment: fixed;
}
.dark body {
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 0.5px, transparent 0.5px);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar);
  border-radius: 20px;
}

/* --- Labels / metadata --- */
.label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Category / type badges --- */
.cat-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* --- Quote cards --- */
.quote-card {
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.quote-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}

/* Decorative opening quotation mark */
.quote-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.22;
  user-select: none;
}

.quote-text {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
}

/* --- Entry cards (laws, fallacies) --- */
.entry-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border-left: 3px solid var(--color-border);
}
.entry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}
.entry-card.general  { border-left-color: var(--color-cat-general); }
.entry-card.complex  { border-left-color: var(--color-cat-complex); }
.entry-card.economy  { border-left-color: var(--color-cat-economy); }
.entry-card.software { border-left-color: var(--color-cat-software); }

.dot-general  { background: var(--color-cat-general); }
.dot-complex  { background: var(--color-cat-complex); }
.dot-economy  { background: var(--color-cat-economy); }
.dot-software { background: var(--color-cat-software); }

/* --- Section rule / heading flourish --- */
.section-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

/* --- Hero --- */
.hero-rule {
  height: 3px;
  width: 4rem;
  background: var(--color-accent);
  border-radius: 9999px;
}

/* --- Prose tweaks --- */
.prose a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- Print --- */
@media print {
  .navbar,
  .mobile-menu,
  footer,
  .dark-toggle {
    display: none !important;
  }
  body {
    color: #000 !important;
    background: #fff !important;
    background-image: none !important;
  }
}