storycove/frontend/src/app/globals.css

@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 {
    @apply text-2xl font-bold mt-8 mb-4 theme-header;
  }
  
  .reading-content h2 {
    @apply text-xl font-bold mt-6 mb-3 theme-header;
  }
  
  .reading-content h3 {
    @apply text-lg font-semibold mt-6 mb-3 theme-header;
  }
  
  .reading-content h4 {
    @apply text-base font-semibold mt-4 mb-2 theme-header;
  }
  
  .reading-content h5 {
    @apply text-sm font-semibold mt-4 mb-2 theme-header;
  }
  
  .reading-content h6 {
    @apply text-xs font-semibold mt-4 mb-2 theme-header uppercase tracking-wide;
  }
  
  .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;
  }

  /* Image styling for story content */
  .reading-content img {
    @apply max-w-full h-auto mx-auto my-6 rounded-lg shadow-sm;
    max-height: 80vh; /* Prevent images from being too tall */
    display: block;
    /* Optimize for performance and prevent reloading */
    will-change: auto;
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
    image-rendering: optimizeQuality;
    /* Prevent layout shifts that might trigger reloads */
    box-sizing: border-box;
    /* Ensure stable dimensions */
    min-height: 1px;
  }

  .reading-content img[align="left"] {
    @apply float-left mr-4 mb-4 ml-0;
    max-width: 50%;
  }

  .reading-content img[align="right"] {
    @apply float-right ml-4 mb-4 mr-0;
    max-width: 50%;
  }

  .reading-content img[align="center"] {
    @apply block mx-auto;
  }

  /* Editor content styling - same as reading content but for the rich text editor */
  .editor-content h1 {
    @apply text-2xl font-bold mt-8 mb-4 theme-header;
  }
  
  .editor-content h2 {
    @apply text-xl font-bold mt-6 mb-3 theme-header;
  }
  
  .editor-content h3 {
    @apply text-lg font-semibold mt-6 mb-3 theme-header;
  }
  
  .editor-content h4 {
    @apply text-base font-semibold mt-4 mb-2 theme-header;
  }
  
  .editor-content h5 {
    @apply text-sm font-semibold mt-4 mb-2 theme-header;
  }
  
  .editor-content h6 {
    @apply text-xs font-semibold mt-4 mb-2 theme-header uppercase tracking-wide;
  }
  
  .editor-content p {
    @apply mb-4 theme-text;
  }
  
  .editor-content blockquote {
    @apply border-l-4 pl-4 italic my-6 theme-border theme-text;
  }

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

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

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

  .editor-content em {
    @apply italic;
  }

  /* Image styling for editor content */
  .editor-content img {
    @apply max-w-full h-auto mx-auto my-4 rounded border;
    max-height: 60vh; /* Slightly smaller for editor */
    display: block;
  }

  .editor-content img[align="left"] {
    @apply float-left mr-4 mb-4 ml-0;
    max-width: 50%;
  }

  .editor-content img[align="right"] {
    @apply float-right ml-4 mb-4 mr-0;
    max-width: 50%;
  }

  .editor-content img[align="center"] {
    @apply block mx-auto;
  }

  /* Loading placeholder for images being processed */
  .image-processing-placeholder {
    @apply bg-gray-100 dark:bg-gray-800 animate-pulse rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center;
    min-height: 200px;
  }

  .image-processing-placeholder::before {
    content: "🖼️ Processing image...";
    @apply text-gray-500 dark:text-gray-400 text-sm;
  }
}