@import "tailwindcss";
@import "mapbox-gl/dist/mapbox-gl.css";

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

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-databitat-sand: #f5f1ea;
  --color-databitat-warm: #e8e0d4;
  --color-databitat-teal: #137590;
  --color-databitat-forest: #2d4a3e;
  --color-databitat-night: #1a2620;
  --color-databitat-terracotta: #c4785e;
  --color-databitat-sky: #6b9ac4;
  --color-databitat-gold: #c9a962;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 8px);
}

@layer base {
  :root {
    --background: #f5f1ea;
    --foreground: #1a2620;
    --card: #ffffff;
    --card-foreground: #1a2620;
    --popover: #ffffff;
    --popover-foreground: #1a2620;
    --primary: #137590;
    --primary-foreground: #ffffff;
    --secondary: #e8e0d4;
    --secondary-foreground: #1a2620;
    --muted: #ede8df;
    --muted-foreground: #5c6d64;
    --accent: #c4785e;
    --accent-foreground: #ffffff;
    --destructive: #d4644a;
    --border: #e8e0d4;
    --input: #e8e0d4;
    --ring: #137590;
    --sidebar: #f0ebe3;
    --sidebar-foreground: #1a2620;
    --sidebar-primary: #137590;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #c4785e;
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #ddd3c5;
    --sidebar-ring: #137590;
    --radius: 0.625rem;
  }

  html.dark {
    --background: #0f1815;
    --foreground: #edf1eb;
    --card: #16211d;
    --card-foreground: #edf1eb;
    --popover: #16211d;
    --popover-foreground: #edf1eb;
    --primary: #71b1c3;
    --primary-foreground: #0f1815;
    --secondary: #223029;
    --secondary-foreground: #edf1eb;
    --muted: #1a2621;
    --muted-foreground: #96aba0;
    --accent: #d19178;
    --accent-foreground: #0f1815;
    --destructive: #f08b70;
    --border: #2a3932;
    --input: #31423a;
    --ring: #71b1c3;
    --sidebar: #15201c;
    --sidebar-foreground: #edf1eb;
    --sidebar-primary: #71b1c3;
    --sidebar-primary-foreground: #0f1815;
    --sidebar-accent: #d19178;
    --sidebar-accent-foreground: #0f1815;
    --sidebar-border: #2a3932;
    --sidebar-ring: #71b1c3;
  }

  * {
    border-color: var(--border);
  }

  html {
    color-scheme: light;
    scroll-behavior: smooth;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
  }

  a,
  button {
    @apply outline-none;
  }

  a:focus-visible,
  button:focus-visible {
    @apply ring-2 ring-ring/40 ring-offset-2 ring-offset-background;
  }
}

@layer components {
  .grain::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  }

  html.dark .grain::before {
    opacity: 0.05;
  }

  .bg-grid-pattern {
    background-image:
      linear-gradient(to right, rgba(30, 37, 33, 0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(30, 37, 33, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  html.dark .bg-grid-pattern {
    background-image:
      linear-gradient(to right, rgba(237, 241, 235, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(237, 241, 235, 0.05) 1px, transparent 1px);
  }

  .glass-card {
    @apply rounded-xl border border-border bg-card shadow-sm shadow-black/5 dark:shadow-black/20;
  }

  .section-shell {
    @apply mx-auto max-w-7xl px-6;
  }

  .eyebrow {
    @apply inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground;
  }

  .marketing-button-primary {
    @apply inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-6 text-sm font-medium text-primary-foreground shadow-sm transition hover:bg-primary/90;
  }

  .marketing-button-secondary {
    @apply inline-flex h-10 items-center justify-center gap-2 rounded-md border border-border bg-card px-6 text-sm font-medium text-foreground shadow-sm transition hover:bg-muted;
  }

  .button-primary {
    @apply inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm transition hover:bg-primary/90;
  }

  .button-secondary {
    @apply inline-flex h-9 items-center justify-center gap-2 rounded-md bg-secondary px-4 text-sm font-medium text-secondary-foreground shadow-sm transition hover:bg-secondary/80;
  }

  .button-subtle {
    @apply inline-flex h-9 items-center justify-center gap-2 rounded-md bg-muted px-3 text-sm font-medium text-foreground transition hover:bg-secondary;
  }

  .button-danger {
    @apply inline-flex h-9 items-center justify-center gap-2 rounded-md bg-destructive/10 px-3 text-sm font-medium text-destructive transition hover:bg-destructive/20;
  }

  .field-input {
    @apply h-10 w-full rounded-md border border-input bg-transparent px-3 text-sm text-foreground shadow-sm transition placeholder:text-muted-foreground focus:outline-none focus:ring-[3px] focus:ring-ring/20 focus:border-ring;
  }

  .field-select {
    @apply h-10 w-full rounded-md border border-input bg-transparent px-3 text-sm text-foreground shadow-sm transition focus:outline-none focus:ring-[3px] focus:ring-ring/20 focus:border-ring;
  }

  .surface-panel {
    @apply rounded-md border border-border bg-muted/45;
  }

  .node-sidebar-shell {
    @apply flex h-full min-h-0 flex-col gap-3 overflow-y-auto bg-background px-4 pb-6 pt-3 text-sidebar-foreground;
  }

  .node-sidebar-compact {
    @apply relative h-full min-h-0 flex-col items-center gap-3 overflow-visible bg-background px-3 pb-6 pt-3;
  }

  .node-sidebar-rail-button {
    @apply flex size-12 items-center justify-center rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition hover:border-primary/30 hover:text-foreground;
  }

  .node-sidebar-popout {
    @apply absolute left-full top-0 z-40 ml-3 w-[23rem] max-h-[calc(100vh-5.5rem)] overflow-y-auto rounded-[1.6rem] bg-background shadow-xl;
  }

  .node-sidebar-popout-panel {
    @apply min-h-fit;
  }

  .node-sidebar-panel {
    @apply rounded-[1.35rem] border border-sidebar-border bg-card p-4 shadow-sm;
  }

  .node-sidebar-panel-head {
    @apply flex items-start justify-between gap-3;
  }

  .node-sidebar-panel-intro {
    @apply flex items-start gap-3;
  }

  .node-sidebar-panel-icon {
    @apply flex size-10 shrink-0 items-center justify-center rounded-xl border border-sidebar-border bg-sidebar text-muted-foreground;
  }

  .node-sidebar-panel-title {
    @apply text-sm font-semibold text-sidebar-foreground;
  }

  .node-sidebar-panel-description {
    @apply mt-1 text-sm leading-5 text-muted-foreground;
  }

  .node-sidebar-panel-badge {
    @apply inline-flex items-center rounded-full border border-sidebar-border bg-sidebar px-2 py-1 text-[11px] font-medium text-muted-foreground;
  }

  .node-sidebar-panel-preview {
    @apply mt-4 rounded-xl border border-sidebar-border bg-sidebar p-3;
  }

  .node-landing-shell {
    @apply flex h-full min-h-0 flex-col items-center px-0 py-4 md:min-h-full md:px-10 md:py-8;
  }

  .node-landing-center {
    @apply flex w-full max-w-4xl flex-1 flex-col items-center;
  }

  .node-chat-shell {
    @apply w-full max-w-[52rem] rounded-[1.75rem] border border-border bg-card p-2.5 shadow-sm md:p-3;
  }

  .node-chat-input {
    @apply min-h-20 w-full resize-none bg-transparent px-2 pt-2 text-lg text-foreground placeholder:text-muted-foreground focus:outline-none md:min-h-28 md:px-3 md:pt-3;
  }

  .node-chat-action {
    @apply inline-flex items-center gap-2 rounded-xl border border-border bg-transparent px-4 py-2 text-sm font-medium text-muted-foreground transition hover:border-primary/30 hover:text-foreground;
  }

  .node-chat-action-mobile {
    @apply inline-flex h-9 min-w-11 items-center justify-center rounded-xl border border-border bg-transparent px-3 text-lg text-muted-foreground;
  }

  .node-card-stack-shell {
    @apply flex w-full max-w-4xl flex-col items-center;
  }

  .node-card-stack-note {
    @apply mb-3 text-sm text-muted-foreground;
  }

  .node-card-stack-layer {
    @apply overflow-hidden rounded-t-[1.5rem] shadow-[0_-4px_10px_rgba(26,38,32,0.08),0_10px_18px_rgba(26,38,32,0.12)];
  }

  .node-card-stack-front {
    @apply overflow-hidden rounded-t-[1.7rem] shadow-[0_-6px_18px_rgba(26,38,32,0.10),0_14px_28px_rgba(26,38,32,0.16)];
  }

  .node-card-stack-divider {
    @apply relative z-30 mt-[-0.65rem] h-20 w-full bg-background;
  }

  .node-card-stack-divider::before {
    content: "";
    @apply absolute left-1/2 top-3 h-px w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 bg-border;
  }

  .node-card-create-button {
    @apply absolute left-1/2 top-3 z-10 flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition hover:bg-primary/90;
  }

  .node-card-tone-gold {
    @apply bg-databitat-gold/65;
  }

  .node-card-tone-sky {
    @apply bg-databitat-sky/45;
  }

  .node-card-tone-mist {
    @apply bg-secondary;
  }

  .node-mobile-nav {
    @apply fixed inset-x-0 bottom-0 z-30 grid grid-cols-5 items-center border-t border-border bg-card/95 px-3 pb-[calc(env(safe-area-inset-bottom)+0.2rem)] pt-1.5 backdrop-blur;
  }

  .node-mobile-nav-item {
    @apply flex flex-col items-center gap-1.5 text-xs font-medium text-foreground;
  }

  .node-mobile-nav-primary {
    @apply mx-auto flex size-[4.5rem] -translate-y-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg;
  }

  .menu-item {
    @apply flex items-center gap-2 rounded-sm px-3 py-2 text-sm text-foreground transition hover:bg-muted;
  }

  .menu-item-active {
    @apply bg-muted text-foreground;
  }

  .auth-shell {
    @apply min-h-screen bg-background text-foreground;
  }

  .auth-card {
    @apply rounded-xl border border-border bg-card p-6 shadow-sm sm:p-8;
  }

  .page-kicker {
    @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground;
  }

  .page-title {
    @apply text-3xl font-semibold tracking-[-0.03em] sm:text-4xl;
  }

  .page-copy {
    @apply text-sm leading-6 text-muted-foreground sm:text-[15px];
  }

  .notice-banner {
    @apply rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-100;
  }

  .alert-banner {
    @apply rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-100;
  }

  /* ── Documentation (estil Syntax adaptat a Databitat) ── */

  .docs-prose {
    max-width: none;
    color: var(--foreground);
    line-height: 1.75;
    font-size: 1rem;
  }

  .docs-prose h1 {
    @apply text-4xl font-semibold tracking-tight text-foreground;
    margin-bottom: 0.25em;
  }

  .docs-prose h2 {
    @apply text-2xl font-bold text-foreground;
    margin-top: 2.5em;
    margin-bottom: 0.75em;
    scroll-margin-top: 6rem;
  }

  .docs-prose h3 {
    @apply text-xl font-bold text-foreground;
    margin-top: 2em;
    margin-bottom: 0.5em;
    scroll-margin-top: 6rem;
  }

  .docs-prose p {
    margin-top: 0;
    margin-bottom: 1.25em;
  }

  .docs-prose .lead {
    @apply text-lg text-muted-foreground;
    margin-bottom: 0;
  }

  .docs-prose a {
    @apply font-semibold text-primary underline decoration-primary/30 underline-offset-2 transition;
  }

  .docs-prose a:hover {
    @apply decoration-primary;
  }

  .docs-prose strong {
    @apply font-semibold text-foreground;
  }

  .docs-prose hr {
    @apply my-10 border-border;
  }

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

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

  .docs-prose li {
    padding-left: 0.375em;
  }

  .docs-prose code {
    @apply rounded-md bg-muted px-1.5 py-0.5 text-sm font-semibold text-foreground;
  }

  .docs-prose pre {
    @apply my-6 overflow-x-auto rounded-xl bg-databitat-night p-5 text-sm leading-relaxed text-databitat-sand shadow-lg;
  }

  .docs-prose pre code {
    @apply bg-transparent p-0 text-inherit;
  }

  .docs-sidebar-link {
    @apply block w-full pl-3.5 text-sm text-foreground transition-colors hover:text-foreground;
    @apply before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full;
    @apply before:hidden before:bg-border hover:before:block;
  }

  .docs-sidebar-link-active {
    @apply font-semibold text-primary before:!block before:!bg-primary;
  }

  .docs-callout-info {
    @apply my-8 flex rounded-xl border border-databitat-teal/20 bg-databitat-teal/8 p-6 dark:border-databitat-teal/30 dark:bg-databitat-teal/12;
  }

  .docs-callout-warning {
    @apply my-8 flex rounded-xl border border-databitat-terracotta/20 bg-databitat-terracotta/8 p-6 dark:border-databitat-terracotta/30 dark:bg-databitat-terracotta/12;
  }

  .search-dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
  }

  .search-result mark {
    @apply rounded-sm bg-databitat-teal/15 px-0.5 text-databitat-teal;
  }
}

@keyframes databitat-blob {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  33% {
    transform: translate3d(28px, -34px, 0) scale(1.08);
  }

  66% {
    transform: translate3d(-18px, 20px, 0) scale(0.92);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.hero-blob {
  animation: databitat-blob 12s ease-in-out infinite;
}

.hero-blob-delay {
  animation-delay: 3s;
}

.hero-blob-slow {
  animation-delay: 6s;
  animation-duration: 15s;
}