@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Light Mode Variables */
    --color-background: #FAFAF8;
    --color-text-primary: #2C3E50;
    --color-text-header: #0A1628;
    --color-accent: #2A4D5C;
    --color-accent-hover: #1E3D4A;
    --color-border: #E2E8F0;
    --color-card: #FFFFFF;
    --color-shadow: rgba(0, 0, 0, 0.1);
  }

  .dark {
    /* Dark Mode Variables */
    --color-background: #0A1628;
    --color-text-primary: #F5E6D3;
    --color-text-header: #F5E6D3;
    --color-accent: #D4A574;
    --color-accent-hover: #C49860;
    --color-border: #2A4D5C;
    --color-card: #1E2D3A;
    --color-shadow: rgba(0, 0, 0, 0.3);
  }

  html {
    font-family: Inter, system-ui, sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
  }
}

@layer components {
  .theme-bg {
    background-color: var(--color-background);
  }

  .theme-text {
    color: var(--color-text-primary);
  }

  .theme-header {
    color: var(--color-text-header);
  }

  .theme-accent {
    color: var(--color-accent);
  }

  .theme-accent-bg {
    background-color: var(--color-accent);
  }

  .theme-accent-bg:hover {
    background-color: var(--color-accent-hover);
  }

  .theme-border {
    border-color: var(--color-border);
  }

  .theme-card {
    background-color: var(--color-card);
  }

  .theme-shadow {
    box-shadow: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -1px var(--color-shadow);
  }

  .reading-content {
    @apply mx-auto px-6 py-8;
    font-family: var(--reading-font-family, Georgia, Times, serif);
    font-size: var(--reading-font-size, 16px);
    max-width: var(--reading-max-width, 800px);
    line-height: 1.7;
  }
  
  .reading-content h1,
  .reading-content h2,
  .reading-content h3,
  .reading-content h4,
  .reading-content h5,
  .reading-content h6 {
    @apply font-bold mt-8 mb-4 theme-header;
  }
  
  .reading-content p {
    @apply mb-4 theme-text;
  }
  
  .reading-content blockquote {
    @apply border-l-4 pl-4 italic my-6 theme-border theme-text;
  }

  .reading-content ul,
  .reading-content ol {
    @apply mb-4 pl-6 theme-text;
  }

  .reading-content li {
    @apply mb-2;
  }

  .reading-content strong {
    @apply font-semibold theme-header;
  }

  .reading-content em {
    @apply italic;
  }
}