@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;

/**
 * Base Theme Definition
 * These variables serve as shared values across all seasonal themes
 */
:root {
  --radius: 0.5rem;
  
  /* Default destructive/error colors that aren't seasonal */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  
  /* Content width variables */
  --content-width: min(90%, 1200px);
  --reading-width: min(90%, 700px);
}

/**
 * Spring Theme 🌱
 * Fresh, vibrant green palette inspired by new growth
 */
.spring {
  /* Main colors */
  --background: 120 30% 96%;
  --foreground: 120 15% 15%;
  
  --muted: 120 20% 92%; 
  --muted-foreground: 120 10% 40%;
  
  --popover: 120 30% 96%;
  --popover-foreground: 120 15% 15%;
  
  --card: 120 30% 97%;
  --card-foreground: 120 15% 15%;
  
  --border: 120 30% 85%;
  --input: 120 30% 85%;
  
  --primary: 142 50% 30%;
  --primary-foreground: 120 54% 95%;
  
  --secondary: 120 20% 92%;
  --secondary-foreground: 120 15% 15%;
  
  --accent: 142 76% 45%;
  --accent-foreground: 120 54% 98%;
  
  --ring: 142 50% 30%;
  
  /* Legacy semantic colors for backward compatibility */
  --cream: 120 30% 96%;
  --navy: 142 50% 30%;
  --russet: 22 80% 50%;
  --sage: 142 40% 55%;
  --ink: 120 15% 15%;
  --paper: 120 20% 92%;
}

.spring.dark {
  --background: 143 30% 12%;
  --foreground: 120 15% 90%;
  
  --muted: 143 25% 18%;
  --muted-foreground: 120 10% 70%;
  
  --popover: 143 30% 14%;
  --popover-foreground: 120 15% 90%;
  
  --card: 143 30% 14%;
  --card-foreground: 120 15% 90%;
  
  --border: 143 25% 25%;
  --input: 143 25% 25%;
  
  --primary: 142 75% 45%;
  --primary-foreground: 120 54% 98%;
  
  --secondary: 143 25% 20%;
  --secondary-foreground: 120 15% 90%;
  
  --accent: 142 75% 45%;
  --accent-foreground: 120 54% 98%;
  
  --ring: 142 75% 45%;
  
  /* Legacy semantic colors for backward compatibility */
  --cream: 120 15% 90%;
  --navy: 142 75% 45%;
  --russet: 22 70% 55%;
  --sage: 142 60% 45%;
  --ink: 120 15% 90%;
  --paper: 143 25% 18%;
}

/**
 * Summer Theme ☀️
 * Warm, sunny palette with amber and gold tones
 */
.summer {
  /* Main colors */
  --background: 48 30% 96%;
  --foreground: 30 15% 15%;
  
  --muted: 48 20% 92%;
  --muted-foreground: 30 10% 40%;
  
  --popover: 48 30% 96%;
  --popover-foreground: 30 15% 15%;
  
  --card: 48 30% 97%;
  --card-foreground: 30 15% 15%;
  
  --border: 48 30% 85%;
  --input: 48 30% 85%;
  
  --primary: 36 80% 40%;
  --primary-foreground: 48 54% 98%;
  
  --secondary: 48 20% 92%;
  --secondary-foreground: 30 15% 15%;
  
  --accent: 36 80% 50%;
  --accent-foreground: 48 54% 98%;
  
  --ring: 36 80% 40%;
  
  /* Legacy semantic colors */
  --cream: 48 30% 96%;
  --navy: 36 80% 40%;
  --russet: 16 80% 55%;
  --sage: 54 60% 45%;
  --ink: 30 15% 15%;
  --paper: 48 20% 92%;
}

.summer.dark {
  --background: 36 30% 12%;
  --foreground: 48 15% 90%;
  
  --muted: 36 25% 18%;
  --muted-foreground: 30 10% 70%;
  
  --popover: 36 30% 14%;
  --popover-foreground: 48 15% 90%;
  
  --card: 36 30% 14%;
  --card-foreground: 48 15% 90%;
  
  --border: 36 25% 25%;
  --input: 36 25% 25%;
  
  --primary: 36 70% 55%;
  --primary-foreground: 48 54% 98%;
  
  --secondary: 36 25% 20%;
  --secondary-foreground: 48 15% 90%;
  
  --accent: 36 70% 55%;
  --accent-foreground: 48 54% 98%;
  
  --ring: 36 70% 55%;
  
  /* Legacy semantic colors */
  --cream: 48 15% 90%;
  --navy: 36 70% 55%;
  --russet: 16 70% 60%;
  --sage: 54 50% 50%;
  --ink: 48 15% 90%;
  --paper: 36 25% 18%;
}

/**
 * Autumn Theme 🍂
 * Rich, earthy palette with warm reds and oranges
 */
.autumn {
  /* Main colors */
  --background: 24 30% 96%;
  --foreground: 24 15% 15%;
  
  --muted: 24 20% 92%;
  --muted-foreground: 18 10% 40%;
  
  --popover: 24 30% 96%;
  --popover-foreground: 24 15% 15%;
  
  --card: 24 30% 97%;
  --card-foreground: 24 15% 15%;
  
  --border: 24 30% 85%;
  --input: 24 30% 85%;
  
  --primary: 18 75% 35%;
  --primary-foreground: 24 54% 98%;
  
  --secondary: 24 20% 92%;
  --secondary-foreground: 24 15% 15%;
  
  --accent: 18 75% 45%;
  --accent-foreground: 24 54% 98%;
  
  --ring: 18 75% 35%;
  
  /* Legacy semantic colors */
  --cream: 24 30% 96%;
  --navy: 18 75% 35%;
  --russet: 12 80% 45%;
  --sage: 36 60% 45%;
  --ink: 24 15% 15%;
  --paper: 24 20% 92%;
}

.autumn.dark {
  --background: 18 30% 12%;
  --foreground: 24 15% 90%;
  
  --muted: 18 25% 18%;
  --muted-foreground: 18 10% 70%;
  
  --popover: 18 30% 14%;
  --popover-foreground: 24 15% 90%;
  
  --card: 18 30% 14%;
  --card-foreground: 24 15% 90%;
  
  --border: 18 25% 25%;
  --input: 18 25% 25%;
  
  --primary: 18 65% 50%;
  --primary-foreground: 24 54% 98%;
  
  --secondary: 18 25% 20%;
  --secondary-foreground: 24 15% 90%;
  
  --accent: 18 65% 50%;
  --accent-foreground: 24 54% 98%;
  
  --ring: 18 65% 50%;
  
  /* Legacy semantic colors */
  --cream: 24 15% 90%;
  --navy: 18 65% 50%;
  --russet: 12 70% 50%;
  --sage: 36 50% 50%;
  --ink: 24 15% 90%;
  --paper: 18 25% 18%;
}

/**
 * Winter Theme ❄️
 * Cool, crisp palette with blues and silvers
 */
.winter {
  /* Main colors */
  --background: 210 30% 97%;
  --foreground: 210 15% 15%;
  
  --muted: 210 20% 93%;
  --muted-foreground: 210 10% 40%;
  
  --popover: 210 30% 97%;
  --popover-foreground: 210 15% 15%;
  
  --card: 210 30% 98%;
  --card-foreground: 210 15% 15%;
  
  --border: 210 30% 85%;
  --input: 210 30% 85%;
  
  --primary: 220 70% 35%;
  --primary-foreground: 210 54% 98%;
  
  --secondary: 210 20% 93%;
  --secondary-foreground: 210 15% 15%;
  
  --accent: 220 70% 45%;
  --accent-foreground: 210 54% 98%;
  
  --ring: 220 70% 35%;
  
  /* Legacy semantic colors */
  --cream: 210 30% 97%;
  --navy: 220 70% 35%;
  --russet: 0 60% 50%;
  --sage: 200 60% 45%;
  --ink: 210 15% 15%;
  --paper: 210 20% 93%;
}

.winter.dark {
  --background: 220 30% 12%;
  --foreground: 210 15% 90%;
  
  --muted: 220 25% 18%;
  --muted-foreground: 210 10% 70%;
  
  --popover: 220 30% 14%;
  --popover-foreground: 210 15% 90%;
  
  --card: 220 30% 14%;
  --card-foreground: 210 15% 90%;
  
  --border: 220 25% 25%;
  --input: 220 25% 25%;
  
  --primary: 220 60% 55%;
  --primary-foreground: 210 54% 98%;
  
  --secondary: 220 25% 20%;
  --secondary-foreground: 210 15% 90%;
  
  --accent: 220 60% 55%;
  --accent-foreground: 210 54% 98%;
  
  --ring: 220 60% 55%;
  
  /* Legacy semantic colors */
  --cream: 210 15% 90%;
  --navy: 220 60% 55%;
  --russet: 0 55% 55%;
  --sage: 200 45% 50%;
  --ink: 210 15% 90%;
  --paper: 220 25% 18%;
}

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

@layer base {
  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
    @apply spring; /* Default to spring theme */
  }
  
  body {
    @apply bg-background text-foreground font-serif antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-primary dark:text-primary-foreground;
  }
  
  p {
    @apply text-foreground dark:text-foreground/90;
  }
  
  /* Line numbers for reading view */
  .line-number {
    @apply inline-block min-w-8 mr-2 text-right text-muted-foreground/70 dark:text-muted-foreground/60 select-none;
  }
  
  /* Text lines in reading view */
  .text-line {
    @apply flex py-1 rounded;
  }
  
  .text-line:hover {
    @apply bg-primary/5 dark:bg-primary-foreground/5;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-muted/50 dark:bg-muted/50;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-accent/80 rounded-full;
  }
  
  .dark ::-webkit-scrollbar-thumb {
    @apply bg-accent/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;
  }
}