@import "tailwindcss";

/* =============================================================================
   GNO Serve - "Scholarly Dusk" Design System
   Matching the website design language for consistency
   ============================================================================= */

/* Register semantic colors with Tailwind v4 to generate utility classes */
@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
}

:root {
  /* Dark theme (Default) - "Library at Night" */
  --background: 0 0% 2%; /* #050505 */
  --foreground: 0 0% 93%; /* #ededed */
  --card: 220 14% 7%; /* #0f1115 */
  --card-foreground: 0 0% 93%;
  --popover: 220 14% 7%;
  --popover-foreground: 0 0% 93%;
  --primary: 169 41% 51%; /* #4db8a8 - Alchemical Teal */
  --primary-foreground: 0 0% 100%;
  --secondary: 39 56% 58%; /* #d4a053 - Old Gold */
  --secondary-foreground: 0 0% 100%;
  --muted: 217 14% 11%; /* #181b21 */
  --muted-foreground: 214 7% 61%; /* #949ba3 */
  --accent: 169 41% 51%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 12% 14%; /* #1f2329 */
  --input: 216 12% 14%;
  --ring: 169 41% 51%;
  --radius: 0.5rem;

  /* Extended palette */
  --surface: 217 14% 11%;
  --hover: 217 12% 16%;
  --accent-glow: 169 41% 51%;
  --warm: 39 56% 58%;
}

[data-theme="light"] {
  /* Light theme - "Antique Paper" */
  --background: 40 33% 98%; /* #fcfbf9 */
  --foreground: 30 9% 13%; /* #24221f */
  --card: 38 24% 95%; /* #f5f2ee */
  --card-foreground: 30 9% 13%;
  --popover: 38 24% 95%;
  --popover-foreground: 30 9% 13%;
  --primary: 191 66% 32%; /* #1a6b7d */
  --primary-foreground: 0 0% 100%;
  --secondary: 39 62% 35%; /* #9a7225 */
  --secondary-foreground: 0 0% 100%;
  --muted: 35 17% 91%;
  --muted-foreground: 30 8% 33%;
  --border: 35 12% 85%;
  --input: 35 12% 85%;
  --ring: 191 66% 32%;
}

/* Base styles */
* {
  border-color: hsl(var(--border));
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  /* System fonts for local-first/offline operation */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.65;
  margin: 0;
  min-height: 100vh;

  /* Layered background: teal radial glow + refined grid */
  background-image:
    radial-gradient(
      ellipse at 50% 0%,
      hsl(var(--primary) / 0.05) 0%,
      transparent 50%
    ),
    linear-gradient(hsl(var(--foreground) / 0.018) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.018) 1px, transparent 1px);
  background-size:
    100% 100%,
    32px 32px,
    32px 32px;
  background-attachment: fixed, scroll, scroll;
}

::selection {
  background-color: hsl(var(--primary) / 0.25);
  color: hsl(var(--foreground));
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  /* Distinctive serif stack - offline-safe system fonts */
  font-family:
    "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
    serif;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

code,
pre {
  font-family:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    monospace;
}

/* Search highlight */
mark {
  @apply bg-yellow-500/30 text-inherit rounded-sm px-0.5;
}

/* Focus styles */
:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Command palette: own focus + selection treatment; do not inherit global rings */
[cmdk-input] {
  outline: none !important;
  box-shadow: none !important;
}

[cmdk-input]:focus,
[cmdk-input]:focus-visible,
[cmdk-root] [data-slot="command-input-wrapper"],
[cmdk-root] [data-slot="command-input-wrapper"]:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

[cmdk-root] [data-slot="command-input-wrapper"] {
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--muted) / 0.2);
}

[cmdk-root] [data-slot="command-input-wrapper"]:focus-within {
  border-bottom-color: hsl(var(--primary) / 0.45);
  background: hsl(var(--card) / 0.96);
}

[cmdk-root] [cmdk-item] {
  border: 1px solid transparent;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

[cmdk-root] [cmdk-item][data-selected="true"] {
  background: hsl(var(--primary) / 0.18);
  border-color: hsl(var(--primary) / 0.38);
  color: hsl(var(--foreground));
  box-shadow:
    inset 3px 0 0 hsl(var(--primary)),
    inset 0 0 0 1px hsl(var(--primary) / 0.18);
}

[cmdk-root] [cmdk-item][data-selected="true"] svg,
[cmdk-root] [cmdk-item][data-selected="true"] [data-slot="command-shortcut"] {
  color: hsl(var(--primary));
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Animation utilities */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.2);
  }
  50% {
    box-shadow: 0 0 40px hsl(var(--primary) / 0.4);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Stagger animation delays */
.stagger-1 {
  animation-delay: 0.1s;
}
.stagger-2 {
  animation-delay: 0.2s;
}
.stagger-3 {
  animation-delay: 0.3s;
}
.stagger-4 {
  animation-delay: 0.4s;
}
.stagger-5 {
  animation-delay: 0.5s;
}
.stagger-6 {
  animation-delay: 0.6s;
}

/* Slide-up reveal with spring-like ease */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Scale entrance */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scale-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Collapsible animations */
@keyframes collapse-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
}

@keyframes collapse-up {
  from {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

.animate-collapse-down {
  animation: collapse-down 0.2s ease-out;
}

.animate-collapse-up {
  animation: collapse-up 0.15s ease-out;
}

/* Glassmorphism utility - enhanced depth */
.glass {
  background: hsl(var(--background) / 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid hsl(var(--border) / 0.5);
  box-shadow:
    0 0 40px -10px hsl(var(--primary) / 0.1),
    inset 0 1px 0 hsl(var(--foreground) / 0.03);
}

/* Aurora glow effect */
.aurora-glow {
  position: relative;
}

.aurora-glow::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    ellipse at center,
    hsl(var(--primary) / 0.15),
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
  filter: blur(60px);
}

/* Interactive card lift effect */
.card-lift {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -10px hsl(var(--primary) / 0.2);
}

/* Text glow for hero / display elements */
.glow-text {
  text-shadow:
    0 0 40px hsl(var(--primary) / 0.3),
    0 0 80px hsl(var(--primary) / 0.15);
}

[data-theme="light"] .glow-text {
  text-shadow: none;
}

/* Decorative ornamental divider */
.ornament {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--border)),
    transparent
  );
}

/* Warm glass variant with secondary/gold accent. Reserved for future cards. */
.glass-warm {
  background: hsl(var(--card) / 0.8);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid hsl(var(--secondary) / 0.12);
  box-shadow: 0 0 30px -10px hsl(var(--secondary) / 0.08);
}

/* Vignette overlay for atmospheric depth. Requires position: relative on host. */
.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    hsl(var(--background) / 0.4) 100%
  );
}

/* Focus ring with glow */
.focus-glow:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
  box-shadow: 0 0 20px -5px hsl(var(--primary) / 0.5);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Native PDF viewer (fn-112) ───────────────────────────────────────────── */

.gno-pdf-viewer {
  isolation: isolate;
}

.gno-pdf-page-column {
  scrollbar-gutter: stable;
  /* The page hook is the sole scroll compensator for geometry corrections
     (use-pdf-pages.ts anchored correction); browser scroll anchoring on top
     of it would move the page in view by the delta a second time. */
  overflow-anchor: none;
}

.gno-pdf-page {
  position: relative;
  margin: 0 auto 1rem;
  max-width: 100%;
  background: hsl(var(--muted) / 0.2);
  border: 1px solid hsl(var(--border) / 0.4);
  border-radius: 0.25rem;
  box-shadow:
    0 1px 2px hsl(var(--background) / 0.4),
    0 8px 24px -12px hsl(var(--foreground) / 0.18);
  /* pdfjs v5 TextLayer CSS contract on the page wrapper (inherits to layers) */
  --scale-factor: 1;
  --user-unit: 1;
  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit, 1));
  --scale-round-x: 1px;
  --scale-round-y: 1px;
}

.gno-pdf-page-inner {
  position: relative;
  /* Existing Scholarly Dusk semantic surface token — no invented paper color */
  background: hsl(var(--card));
  overflow: hidden;
}

.gno-pdf-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* Text layer: transparent text over canvas, Scholarly Dusk selection */
.gno-pdf-text-layer,
.textLayer {
  position: absolute;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

.gno-pdf-text-layer :is(span, br),
.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.gno-pdf-text-layer ::selection,
.textLayer ::selection {
  background: hsl(var(--primary) / 0.35);
  color: transparent;
}

.gno-pdf-annotation-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.gno-pdf-annotation-link,
.gno-pdf-annotation-inert {
  position: absolute;
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.gno-pdf-annotation-inert {
  cursor: default;
  pointer-events: none;
}

.gno-pdf-page[data-rendered="false"] .gno-pdf-page-inner {
  animation: gno-pdf-pulse 1.6s ease-in-out infinite;
}

@keyframes gno-pdf-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gno-pdf-page[data-rendered="false"] .gno-pdf-page-inner {
    animation: none;
  }
}

/* Keep the review and actions inside the viewport, including short windows and
   mobile keyboards. Only the form body scrolls; the close/export controls stay put. */
.publish-export-dialog {
  display: flex;
  flex-direction: column;
  width: min(36rem, calc(100vw - 2rem));
  max-width: 36rem;
  max-height: calc(100dvh - 2rem);
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.publish-export-dialog-header {
  flex-shrink: 0;
  padding: 1.25rem 2.5rem 1rem 1.5rem;
  overflow-wrap: anywhere;
}

.publish-export-dialog-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 1.5rem 1.25rem;
}

.publish-export-dialog-footer {
  flex-shrink: 0;
  border-top: 1px solid hsl(var(--border));
  padding: 1rem 1.5rem;
}