@import "tailwindcss";

@source "../index.html";
@source "../src/**/*.{vue,astro,ts,js,css}";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-ink: #1a1b2e;
  --color-ink-50: #f0f0f4;
  --color-ink-100: #dddde6;
  --color-ink-200: #b8b9cc;
  --color-ink-300: #8d8faa;
  --color-ink-400: #636588;
  --color-ink-500: #484a6e;
  --color-ink-600: #36385a;
  --color-ink-700: #2c2e4a;
  --color-ink-800: #1a1b2e;
  --color-ink-900: #0f1020;

  --color-surface: #faf9f6;
  --color-surface-alt: #f3f2ee;
  --color-surface-raised: #ffffff;

  --color-rel-definitional: #3b82f6;
  --color-rel-designation: #10b981;
  --color-rel-contextual: #f59e0b;
  --color-rel-organizational: #8b5cf6;
  --color-rel-temporal: #ec4899;

  --color-status-valid: #10b981;
  --color-status-superseded: #f59e0b;
  --color-status-withdrawn: #ef4444;
  --color-status-draft: #6366f1;

  --color-group-lineage: #d97706;
  --color-group-topic: #059669;
  --color-group-family: #6366f1;
  --color-group-collection: #0891b2;

  /* Tailwind font utilities. Defined as `var()` references to the slot
     variables so the utilities exist (templates still reference
     `.font-serif`, `.font-sans`, `.font-mono`) but the bundle's
     `:root, :host { ... }` block emits ALIASES, not literal values —
     meaning it cannot clobber whatever the inline `<style>` sets.

     The inline style (Default.astro) emits ONLY slot-named variables
     (--font-title, --font-heading, --font-body, --font-mono) via
     buildFontVariables() in src/utils/font-variables.ts. The aliases
     here resolve to those slot variables through the cascade. */
  --font-serif: var(--font-heading);
  --font-sans: var(--font-body);
  --font-mono: var(--font-mono);
}

:root {
  --rel-definitional: var(--color-rel-definitional);
  --rel-designation: var(--color-rel-designation);
  --rel-contextual: var(--color-rel-contextual);
  --rel-organizational: var(--color-rel-organizational);
  --rel-temporal: var(--color-rel-temporal);
  --status-valid: var(--color-status-valid);
  --status-superseded: var(--color-status-superseded);
  --status-withdrawn: var(--color-status-withdrawn);
  --status-draft: var(--color-status-draft);
  --group-lineage: var(--color-group-lineage);
  --group-topic: var(--color-group-topic);
  --group-family: var(--color-group-family);
  --group-collection: var(--color-group-collection);
  --brand-primary: #2563eb;
  --brand-primary-rgb: 37, 99, 235;
  --brand-dark: #1e293b;
  --gold-accent: #B8935A;
  --gold-accent-deep: #8C6A3A;
}

@layer base {
  body {
    font-family: var(--font-body);
    @apply antialiased bg-surface text-ink-800;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* Slot-named utilities — the canonical API. Each maps to a CSS variable
     emitted by buildFontVariables() in src/utils/font-variables.ts. */
  .font-title   { font-family: var(--font-title); }
  .font-heading { font-family: var(--font-heading); }
  .font-body    { font-family: var(--font-body); }
  /* Backward-compat aliases. Existing templates use `.font-serif` and
     `.font-sans`; map them to slot variables so brand fonts propagate
     without forcing every consumer to rewrite markup. These do NOT
     bake in serif↔heading / sans↔body — the slot variable holds
     whatever category the consumer declared. */
  .font-serif   { font-family: var(--font-heading); }
  .font-sans    { font-family: var(--font-body); }
  /* Legacy alias for `.font-header` (renamed to `.font-heading`). */
  .font-header  { font-family: var(--font-heading); }
  /* Default heading typography — applies unless overridden by a slot class. */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
  }
  code, pre, .font-mono {
    font-family: var(--font-mono);
  }
}

@utility card {
  background-color: var(--color-surface-raised);
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-ink-100) 60%, transparent);
  box-shadow: 0 1px 3px rgba(26, 27, 46, 0.04), 0 1px 2px rgba(26, 27, 46, 0.02);
}

@utility badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

@utility concept-link {
  color: var(--brand-primary);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 150ms;
  &:hover {
    text-decoration: underline;
    filter: brightness(0.8);
  }
}

@utility xref-link {
  color: var(--brand-primary);
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
  transition: color 150ms;
  &:hover {
    text-decoration: underline;
  }
}

@utility text-balance {
  text-wrap: balance;
}

@utility scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@layer components {
  .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);
    border-color: var(--color-ink-200);
    transform: translateY(-1px);
  }
  .card-hover:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(26, 27, 46, 0.04);
  }

  .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;
  }

  .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;
  }
  .badge-brand {
    @apply badge;
    background-color: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
  }

  .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;
  }

  .nv-entity--highlighted {
    outline: 2px solid var(--brand-primary);
    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-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(--color-ink-200);
    padding: 0.375rem 0.625rem;
    vertical-align: top;
    text-align: left;
  }

  .lang-content {
    overflow: hidden;
    transition: max-height 250ms ease-out, opacity 200ms ease-out;
  }

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

  .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-family: var(--font-mono);
  }

  .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-family: var(--font-mono);
  }
  .prose-page pre, .prose-news pre {
    @apply bg-ink-50 rounded-lg p-4 mb-4 overflow-x-auto text-xs;
    font-family: var(--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;
  }
}

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

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

@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 body {
  background-color: #0f1020;
  color: #dddde6;
}

.dark {
  --color-ink-50: #161728;
  --color-ink-100: #484a6e;
  --color-ink-200: #484a6e;
  --color-ink-300: #636588;
  --color-ink-400: #7a7c9a;
  --color-ink-500: #9d9fbb;
  --color-ink-600: #b8b9cc;
  --color-ink-700: #c8c9d8;
  --color-ink-800: #dddde6;
  --color-ink-900: #eeeef4;
  --color-surface: #0f1020;
  --color-surface-alt: #161728;
  --color-surface-raised: #1e1f34;
  --brand-primary: #ff5d5d;
  --brand-primary-rgb: 255, 93, 93;
  --brand-dark: #1a1b2e;
  --gold-accent: #D4AF6E;
  --gold-accent-deep: #B8935A;
}

.dark .concept-link,
.dark .xref-link,
.dark .prose-page a,
.dark .prose-news a,
.dark .prose-page a:hover,
.dark .prose-news a:hover {
  color: #ff6b6b;
}
.dark .concept-link:hover,
.dark .xref-link:hover {
  filter: brightness(1.15);
}

.dark .badge-brand {
  background-color: rgba(255, 93, 93, 0.15);
  color: #ff8a8a;
}

.dark .btn-primary:hover {
  background-color: #c41818;
}

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

.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; }

.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; }

.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; }

.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; }

.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;
}

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

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

.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; }

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

.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; }

.dark .section-label {
  color: var(--color-ink-300) !important;
}