@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Exo:ital,wght@0,100..900;1,100..900&family=Inconsolata:wdth,wght@50..200,200..900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-inter: 'Inter Tight', ui-sans-serif, system-ui;
  --font-exo: 'Exo', 'Inter Tight', ui-sans-serif, system-ui;
  --font-mono: 'Inconsolata', ui-monospace, monospace;
}

html {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CHORUS Blog Typography */
.prose {
  @apply max-w-none text-carbon-950 dark:text-carbon-100;
}

.prose h1 {
  @apply text-h2 font-sans font-thin text-carbon-950 dark:text-mulberry-100 mb-8;
}

.prose h2 {
  @apply text-h3 font-logo text-carbon-950 dark:text-mulberry-200 mb-6 mt-12;
}

.prose h3 {
  @apply text-h4 font-sans text-carbon-950 dark:text-mulberry-300 mb-4 mt-8;
}

.prose h4 {
  @apply text-h5 font-sans text-carbon-800 dark:text-mulberry-400 mb-3 mt-6;
}

.prose h5 {
  @apply text-h6 font-sans text-carbon-700 dark:text-mulberry-500 mb-3 mt-6;
}

.prose h6 {
  @apply text-h7 font-sans text-carbon-600 dark:text-mulberry-600 mb-2 mt-4;
}

.prose p {
  @apply text-base leading-relaxed mb-6 text-carbon-800 dark:text-carbon-200;
}

.prose a {
  @apply text-ocean-600 dark:text-ocean-400 hover:text-ocean-800 dark:hover:text-ocean-300 transition-colors underline decoration-ocean-500/30 hover:decoration-ocean-600/50 dark:hover:decoration-ocean-400/50;
}

.prose strong {
  @apply text-carbon-950 dark:text-carbon-100 font-semibold;
}

.prose code {
  @apply bg-carbon-200 dark:bg-carbon-800 text-eucalyptus-700 dark:text-eucalyptus-400 px-2 py-1 rounded-sm font-mono text-sm;
}

.prose pre {
  @apply bg-carbon-100 dark:bg-carbon-900 border border-carbon-300 dark:border-carbon-700 rounded-lg overflow-x-auto p-4 mb-6;
}

.prose pre code {
  @apply bg-transparent text-carbon-950 dark:text-carbon-200 p-0;
}

.prose blockquote {
  @apply border-l-4 border-carbon-400 dark:border-mulberry-600 pl-6 italic text-carbon-600 dark:text-carbon-300 my-6;
}

.prose ul {
  @apply list-disc pl-6 mb-6 space-y-2;
}

.prose ol {
  @apply list-decimal pl-6 mb-6 space-y-2;
}

.prose li {
  @apply text-carbon-800 dark:text-carbon-200;
}

/* Blog-specific utilities */
.blog-container {
  @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
}

.blog-meta {
  @apply text-sm text-carbon-600 dark:text-carbon-500 flex items-center space-x-4;
}

.blog-tag {
  @apply inline-block bg-carbon-200 dark:bg-mulberry-800 text-carbon-700 dark:text-mulberry-200 px-3 py-1 rounded-full text-xs font-medium;
}

/* Reading progress indicator */
.reading-progress {
  @apply fixed top-0 left-0 w-full h-1 bg-ocean-600 dark:bg-mulberry-600 transform origin-left scale-x-0 transition-transform z-50;
}

/* Utilities */
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}