@import "tailwindcss";

/* JoPer Custom Theme */
@theme {
  /* Colors from charte-graphique.md */
  --color-cream: #FAF9F6;
  --color-ink: #1A1A1A;
  --color-dot: #D4D4D4;
  --color-accent: #2C3E50;
  --color-gray-medium: #6B7280;
  --color-kraft: #C4A77D;

  /* Typography */
  --font-family-serif: 'Libre Baskerville', Georgia, serif;
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-family-handwriting: 'Caveat', cursive;
}

/* Base styles */
@layer base {
  html {
    font-family: var(--font-family-sans);
    background-color: var(--color-cream);
    color: var(--color-ink);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-serif);
  }
}

/* Dot grid background pattern */
@layer utilities {
  .bg-dotgrid {
    background-image: radial-gradient(var(--color-dot) 1px, transparent 1px);
    background-size: 20px 20px;
  }
}

/* Prose styles for rich text content */
@layer components {
  .prose {
    line-height: 1.75;
  }

  .prose p {
    margin-bottom: 1.25rem;
  }

  .prose h2 {
    font-family: var(--font-family-serif);
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .prose h3 {
    font-family: var(--font-family-serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .prose strong, .prose b {
    font-weight: 600;
  }

  .prose a {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .prose a:hover {
    color: var(--color-ink);
  }

  .prose ul, .prose ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
  }

  .prose ul {
    list-style-type: disc;
  }

  .prose ol {
    list-style-type: decimal;
  }

  .prose li {
    margin-bottom: 0.5rem;
  }

  .prose blockquote {
    border-left: 4px solid var(--color-accent);
    padding-left: 1rem;
    font-style: italic;
    color: var(--color-gray-medium);
    margin: 1.5rem 0;
  }
}

/* Print styles */
@media print {
  /* Hide non-essential elements */
  header,
  footer,
  nav,
  #mobile-menu,
  #mobile-menu-btn,
  .no-print,
  section.bg-accent,
  .flex.justify-center.gap-4 {
    display: none !important;
  }

  /* Reset backgrounds and colors */
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Article styling */
  article {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Links: show URL */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  a[href^="#"]:after,
  a[href^="javascript"]:after {
    content: "";
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Headings */
  h1, h2, h3 {
    page-break-after: avoid;
    color: black !important;
  }

  h1 {
    font-size: 24pt !important;
  }

  h2 {
    font-size: 18pt !important;
  }

  h3 {
    font-size: 14pt !important;
  }

  /* Avoid breaking inside */
  p, blockquote, ul, ol, li {
    page-break-inside: avoid;
  }

  /* Page margins */
  @page {
    margin: 2cm;
  }
}