@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Source+Sans+Pro:wght@400;500;600&display=swap');

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

:root {
  --background: 48 33% 97%;
  --foreground: 20 14.3% 4.1%;
  
  --muted: 60 4.8% 95.9%;
  --muted-foreground: 25 5.3% 44.7%;
  
  --popover: 48 33% 97%;
  --popover-foreground: 20 14.3% 4.1%;
  
  --card: 48 33% 97%;
  --card-foreground: 20 14.3% 4.1%;
  
  --border: 60 6% 83%;
  --input: 60 6% 83%;
  
  --primary: 215 40% 23%;
  --primary-foreground: 211 100% 99%;
  
  --secondary: 60 4.8% 95.9%;
  --secondary-foreground: 24 9.8% 10%;
  
  --accent: 5 38% 48%;
  --accent-foreground: 60 9.1% 97.8%;
  
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 60 9.1% 97.8%;
  
  --ring: 5 38% 48%;
  
  --radius: 0.5rem;
  
  /* Custom theme colors */
  --cream: 48 33% 97%;
  --navy: 215 40% 23%;
  --russet: 5 38% 48%;
  --sage: 145 10% 50%;
  --ink: 0 0% 10%;
  --paper: 44 40% 92%;
}

.dark {
  --background: 0 0% 7%;
  --foreground: 0 0% 98%;
  
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 64%;
  
  --popover: 0 0% 12%;
  --popover-foreground: 0 0% 98%;
  
  --card: 0 0% 12%;
  --card-foreground: 0 0% 98%;
  
  --border: 0 0% 20%;
  --input: 0 0% 20%;
  
  --primary: 215 40% 23%;
  --primary-foreground: 211 100% 99%;
  
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 98%;
  
  --accent: 5 38% 48%;
  --accent-foreground: 0 0% 98%;
  
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  
  --ring: 5 38% 48%;
  
  /* Custom theme colors */
  --cream: 0 0% 98%;
  --navy: 215 40% 60%;
  --russet: 5 38% 60%;
  --sage: 145 10% 60%;
  --ink: 0 0% 90%;
  --paper: 0 0% 15%;
}

/* Content width variables */
:root {
  --content-width: min(90%, 1200px);
  --reading-width: min(90%, 700px);
}

@layer base {
  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-cream text-ink font-serif antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-navy dark:text-cream;
  }
  
  p {
    @apply text-ink dark:text-cream/90;
  }
  
  /* Line numbers for reading view */
  .line-number {
    @apply inline-block min-w-8 mr-2 text-right text-sage/70 dark:text-sage/60 select-none;
  }
  
  /* Text lines in reading view */
  .text-line {
    @apply flex py-1 rounded;
  }
  
  .text-line:hover {
    @apply bg-navy/5 dark:bg-cream/5;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-paper/50 dark:bg-[#1e1e1e]/50;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-sage rounded-full;
  }
  
  .dark ::-webkit-scrollbar-thumb {
    @apply bg-sage/70;
  }
  
  /* Font size utilities for reading view */
  .text-size-sm {
    font-size: 16px;
    line-height: 1.7;
  }
  
  .text-size-md {
    font-size: 18px;
    line-height: 1.8;
  }
  
  .text-size-lg {
    font-size: 20px;
    line-height: 1.9;
  }
  
  .text-size-xl {
    font-size: 22px;
    line-height: 2;
  }
  
  /* Progress bar animation */
  .progress-indicator {
    transition: width 0.3s ease;
  }
  
  /* Zen mode */
  .zen-mode .navigation-header,
  .zen-mode .site-footer,
  .zen-mode .context-sidebar,
  .zen-mode .progress-bar {
    @apply hidden;
  }
  
  .zen-mode .reading-container {
    @apply mx-auto p-8 max-w-full;
  }
  
  /* Animation for UI feedback */
  .btn-feedback {
    @apply transition-transform;
  }
  
  .btn-feedback:active {
    @apply scale-95;
  }
}
