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

:root {
  --brand-primary: #2563eb;
  --brand-primary-rgb: 37, 99, 235;
  --brand-dark: #1e293b;
  --font-header: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

@layer base {
  body {
    font-family: var(--font-body);
    @apply antialiased bg-surface text-ink-800;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, .font-serif {
    font-family: var(--font-header);
  }

  code, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }
}

@layer components {
  /* Cards */
  .card {
    @apply bg-surface-raised rounded-xl border border-ink-100/60;
    box-shadow: 0 1px 3px rgba(26, 27, 46, 0.04), 0 1px 2px rgba(26, 27, 46, 0.02);
  }

  .card-hover {
    @apply card transition-all duration-200;
  }
  .card-hover:hover {
    box-shadow: 0 4px 16px rgba(26, 27, 46, 0.08), 0 2px 4px rgba(26, 27, 46, 0.04);
    @apply border-ink-200;
    transform: translateY(-1px);
  }
  .card-hover:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(26, 27, 46, 0.04);
  }

  /* Buttons */
  .btn-primary {
    @apply text-white px-5 py-2 rounded-lg font-medium text-sm transition-all duration-150;
    background-color: var(--brand-dark);
    box-shadow: 0 1px 2px rgba(26, 27, 46, 0.12);
  }
  .btn-primary:hover {
    background-color: var(--brand-primary);
    box-shadow: 0 2px 4px rgba(26, 27, 46, 0.16);
  }
  .btn-primary:disabled {
    @apply bg-ink-300 cursor-not-allowed;
    box-shadow: none;
  }

  .btn-secondary {
    @apply bg-surface-raised text-ink-700 px-5 py-2 rounded-lg font-medium text-sm border border-ink-100 transition-all duration-150;
  }
  .btn-secondary:hover {
    @apply bg-surface-alt border-ink-200;
  }

  .btn-ghost {
    @apply text-ink-600 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-150;
  }
  .btn-ghost:hover {
    @apply bg-ink-50 text-ink-800;
  }
  .btn-ghost.active {
    @apply bg-ink-50 text-ink-800 font-semibold;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium tracking-wide;
  }
  .badge-blue {
    @apply badge bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300;
  }
  .badge-green {
    @apply badge bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300;
  }
  .badge-yellow {
    @apply badge bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300;
  }
  .badge-gray {
    @apply badge bg-ink-50 text-ink-600;
  }
  .badge-purple {
    @apply badge bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300;
  }

  /* Brand badge — uses primary color from CSS var */
  .badge-brand {
    @apply badge;
    background-color: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
  }

  /* Links */
  .concept-link {
    color: var(--brand-primary);
    @apply underline-offset-2 hover:underline cursor-pointer transition-colors;
  }
  .concept-link:hover {
    filter: brightness(0.8);
  }

  .xref-link {
    color: var(--brand-primary);
    @apply underline-offset-2 hover:underline cursor-pointer transition-colors;
    font-weight: 500;
  }

  .bib-link {
    @apply text-ink-600 hover:text-ink-800 underline-offset-2 hover:underline transition-colors;
  }

  .bib-ref {
    @apply text-ink-500 italic;
  }

  .fig-ref a {
    @apply text-ink-600 hover:text-ink-800 underline-offset-2 hover:underline transition-colors;
  }

  /* Non-verbal entity highlight — single source of truth for the
     cross-ref "you landed here" affordance. Toggled by
     utils/non-verbal-highlight.ts; applies to figure/table/formula
     root elements uniformly. */
  .nv-entity--highlighted {
    outline: 2px solid var(--brand-primary, #2563eb);
    outline-offset: 4px;
    animation: nv-entity-pulse 1.6s ease-out;
  }
  @keyframes nv-entity-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    20%      { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.25); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nv-entity--highlighted { animation: none; }
  }

  /* Concept definition lists */
  .concept-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.5rem 0;
  }
  .concept-list-ordered {
    list-style: decimal;
  }
  .concept-list li {
    margin: 0.25rem 0;
  }

  .concept-table {
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    width: 100%;
  }
  .concept-table td {
    border: 1px solid var(--ink-200, #d1d5db);
    padding: 0.375rem 0.625rem;
    vertical-align: top;
    text-align: left;
  }

  /* Smooth collapse for language sections */
  .lang-content {
    overflow: hidden;
    transition: max-height 250ms ease-out, opacity 200ms ease-out;
  }

  /* Section labels */
  .section-label {
    @apply text-[11px] font-semibold uppercase tracking-widest text-ink-400 mb-2;
    font-family: var(--font-body);
  }

  /* Math */
  .math-inline {
    display: inline;
  }
  .math-inline math {
    font-size: 1.05em;
  }
  .math-bold .math-inline math {
    font-weight: bold;
  }
  .math-fallback {
    @apply bg-ink-50 text-ink-600 px-1 rounded text-xs font-mono;
  }

  /* Prose content (news posts, etc.) */
  .prose-page,
  .prose-news {
    @apply text-sm text-ink-700 leading-relaxed;
  }
  .prose-page h2,
  .prose-news h2 {
    @apply font-serif text-xl text-ink-800 mt-6 mb-3;
  }
  .prose-page h3,
  .prose-news h3 {
    @apply font-serif text-lg text-ink-800 mt-5 mb-2;
  }
  .prose-page h4,
  .prose-news h4 {
    @apply font-semibold text-ink-800 mt-4 mb-2;
  }
  .prose-page p,
  .prose-news p {
    @apply mb-4;
  }
  .prose-page ul, .prose-page ol,
  .prose-news ul, .prose-news ol {
    @apply mb-4 pl-5;
  }
  .prose-page ul,
  .prose-news ul {
    @apply list-disc;
  }
  .prose-page ol,
  .prose-news ol {
    @apply list-decimal;
  }
  .prose-page li,
  .prose-news li {
    @apply mb-1;
  }
  .prose-news li.list-level-2 {
    @apply pl-3;
    list-style-type: circle;
  }
  .prose-page a,
  .prose-news a {
    @apply concept-link;
  }
  .prose-page strong,
  .prose-news strong {
    @apply font-semibold text-ink-800;
  }
  .prose-page em,
  .prose-news em {
    @apply italic;
  }
  .prose-page code,
  .prose-news code {
    @apply bg-ink-50 text-ink-600 px-1 rounded text-xs font-mono;
  }
  .prose-page pre,
  .prose-news pre {
    @apply bg-ink-50 rounded-lg p-4 mb-4 overflow-x-auto text-xs font-mono;
  }
  .prose-page pre code,
  .prose-news pre code {
    @apply bg-transparent px-0 text-ink-700;
  }
  .prose-page blockquote,
  .prose-news blockquote {
    @apply border-l-4 border-ink-200 pl-4 italic text-ink-500 mb-4;
  }
  .prose-page hr {
    @apply border-ink-100 my-6;
  }
  .prose-page table,
  .prose-news table {
    @apply w-full mb-4 text-sm;
  }
  .prose-page th,
  .prose-news th {
    @apply text-left font-semibold text-ink-800 px-3 py-2 border-b-2 border-ink-200;
  }
  .prose-page td,
  .prose-news td {
    @apply px-3 py-2 border-b border-ink-100;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Route transitions */
.page-enter-active,
.page-leave-active {
  transition: opacity 150ms ease;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}

/* Staggered entrance for card grids */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-entrance {
  animation: fadeSlideIn 300ms ease both;
}

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f4 25%, #f7f7f9 50%, #f0f0f4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

/* ===== Dark mode ===== */

/*
  Color philosophy:
  Light mode uses an "ink" navy-indigo palette (50=lightest → 900=darkest).
  Dark mode inverts the scale: the darkest light colors become the brightest
  dark colors, maintaining WCAG AA contrast on dark surfaces.

  Surface hierarchy (light → dark):
    surface (#faf9f6) → surface-alt (#f3f2ee) → surface-raised (#fff) — cards, inputs
  Dark surface hierarchy:
    surface (#0f1020) → surface-alt (#161728) → surface-raised (#1e1f34)
    Raised cards sit one step lighter than the base surface.
*/

.dark body {
  background-color: #0f1020;
  color: #dddde6;
}

/* ── Brand colors: lighten for dark backgrounds ── */
/* ISO red (#e3000f) is too harsh on dark — use a softer coral */
.dark {
  --brand-primary: #ff5d5d;
  --brand-primary-rgb: 255, 93, 93;
  --brand-dark: #1a1b2e;
}

/* Concept/xref links: lighten in dark mode (override pure red) */
.dark .concept-link,
.dark .xref-link {
  color: #ff6b6b;
}
.dark .concept-link:hover,
.dark .xref-link:hover {
  filter: brightness(1.15);
}

/* Brand badges: readable background in dark mode */
.dark .badge-brand {
  background-color: rgba(255, 93, 93, 0.15);
  color: #ff8a8a;
}

/* Primary buttons: avoid harsh red hover in dark mode */
.dark .btn-primary:hover {
  background-color: #c41818;
}

/* ── Surfaces ── */
.dark .bg-surface { background-color: #0f1020 !important; }
.dark .bg-surface-alt { background-color: #161728 !important; }
.dark .bg-surface-raised { background-color: #1e1f34 !important; }

/* ── Text (inverted ink scale for dark) ──
   ink-800/700 → primary headings (brightest)
   ink-600     → body text (readable, ≥4.5:1 on raised surfaces)
   ink-500/400 → secondary/hint
   ink-300/200 → muted labels
   ink-100     → borders/decorative only
*/
.dark .text-ink { color: #dddde6 !important; }
.dark .text-ink-900 { color: #eeeef4 !important; }
.dark .text-ink-800 { color: #dddde6 !important; }
.dark .text-ink-700 { color: #c8c9d8 !important; }
.dark .text-ink-600 { color: #b8b9cc !important; }
.dark .text-ink-500 { color: #9d9fbb !important; }
.dark .text-ink-400 { color: #7a7c9a !important; }
.dark .text-ink-300 { color: #636588 !important; }
.dark .text-ink-200 { color: #484a6e !important; }
.dark .text-ink-100 { color: #484a6e !important; }

/* ── Backgrounds ── */
.dark .bg-ink-50 { background-color: #161728 !important; }
.dark .bg-ink-50\/30 { background-color: rgba(22, 23, 40, 0.3) !important; }
.dark .bg-ink-50\/60 { background-color: rgba(22, 23, 40, 0.6) !important; }
.dark .bg-ink-100 { background-color: #1e1f34 !important; }
.dark .bg-ink-200 { background-color: #22243c !important; }
.dark .bg-ink-800 { background-color: #0a0b18 !important; }
.dark .bg-ink-800\/8 { background-color: rgba(10, 11, 24, 0.08) !important; }

/* ── Borders ── */
.dark .border-ink-100 { border-color: #2c2e4a !important; }
.dark .border-ink-100\/30 { border-color: rgba(44, 46, 74, 0.3) !important; }
.dark .border-ink-100\/60 { border-color: rgba(44, 46, 74, 0.6) !important; }
.dark .border-ink-100\/80 { border-color: rgba(44, 46, 74, 0.8) !important; }
.dark .border-ink-200 { border-color: #36385a !important; }
.dark .border-ink-800 { border-color: #2c2e4a !important; }

/* ── Focus rings ── */
.dark .focus\:ring-ink-200:focus { --tw-ring-color: #36385a !important; }
.dark .focus\:ring-ink-200\/30:focus { --tw-ring-color: rgba(54, 56, 90, 0.3) !important; }
.dark .focus\:border-ink-400:focus { border-color: #7a7c9a !important; }

/* ── Cards ── */
.dark .card {
  background-color: #1e1f34 !important;
  border-color: rgba(44, 46, 74, 0.6) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ── Inputs ── */
.dark input {
  background-color: #161728 !important;
  border-color: #2c2e4a !important;
  color: #dddde6 !important;
}
.dark input::placeholder { color: #484a6e !important; }

/* ── Skeleton ── */
.dark .skeleton {
  background: linear-gradient(90deg, #1e1f34 25%, #2c2e4a 50%, #1e1f34 75%) !important;
}

/* ── Hover states ── */
.dark .hover\:bg-ink-50:hover { background-color: #1e1f34 !important; }
.dark .hover\:bg-ink-50\/30:hover { background-color: rgba(30, 31, 52, 0.3) !important; }
.dark .hover\:bg-ink-50\/50:hover { background-color: rgba(30, 31, 52, 0.5) !important; }
.dark .hover\:bg-surface-alt:hover { background-color: #161728 !important; }
.dark .hover\:text-ink-700:hover { color: #dddde6 !important; }
.dark .hover\:text-ink-800:hover { color: #eeeef4 !important; }

/* ── Placeholder text ── */
.dark .placeholder\:text-ink-300::placeholder { color: #484a6e !important; }

/* ── Semantic colors (badges, accent text) ── */
.dark .concept-link {
  filter: brightness(1.5);
}
.dark .concept-link:hover {
  filter: brightness(1.3) underline;
}
.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
.dark .text-blue-600 { color: #93bbfd !important; }
.dark .text-blue-700 { color: #7aa8fb !important; }
.dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.25) !important; }
.dark .border-blue-500 { border-color: #3b82f6 !important; }
.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
.dark .text-emerald-500 { color: #6ee7b7 !important; }
.dark .text-emerald-700 { color: #6ee7b7 !important; }
.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.25) !important; }
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
.dark .text-amber-600 { color: #fbbf24 !important; }
.dark .text-amber-700 { color: #fbbf24 !important; }
.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.15) !important; }
.dark .text-purple-700 { color: #c4b5fd !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
.dark .text-red-600 { color: #fca5a5 !important; }

/* ── Gold accent that adapts to theme ── */
:root {
  --gold-accent: #B8935A;
  --gold-accent-deep: #8C6A3A;
}
.dark {
  --gold-accent: #D4AF6E;
  --gold-accent-deep: #B8935A;
}

/* Section labels brighter in dark mode */
.dark .section-label {
  color: var(--color-ink-300) !important;
}

/* Scrollbar hide utility */
@layer utilities {
  .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
  .scrollbar-none::-webkit-scrollbar { display: none; }
}