/**
 * Design tokens shadcn/ui para Django.
 * Compatível com Tailwind CSS v3 (preset) e v4 (@theme inline).
 *
 * Uso com Tailwind v3: importe tailwind.preset.js no tailwind.config.js
 * Uso com Tailwind v4: @import este arquivo no seu CSS principal
 */

/* Tokens HBI — https://somoshbi.com.br/
   Navy #04245F / #116BAD · Teal #25B4B0 / #38D2CE · Slate #263245 */
:root {
  --background: 178 42% 96%;
  --foreground: 219 92% 14%;
  --card: 178 50% 99%;
  --card-foreground: 219 92% 14%;
  --popover: 178 50% 99%;
  --popover-foreground: 219 92% 14%;
  --primary: 178 66% 38%;
  --primary-foreground: 0 0% 100%;
  --secondary: 205 48% 91%;
  --secondary-foreground: 219 92% 14%;
  --muted: 178 32% 91%;
  --muted-foreground: 217 28% 30%;
  --accent: 178 48% 86%;
  --accent-foreground: 219 92% 14%;
  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --success: 178 66% 34%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 45%;
  --warning-foreground: 26 83% 14%;
  --info: 205 82% 37%;
  --info-foreground: 0 0% 100%;
  --border: 178 28% 78%;
  --input: 178 28% 78%;
  --ring: 178 66% 38%;
  --radius: 0.5rem;
  --chart-1: 178 66% 38%;
  --chart-2: 205 82% 37%;
  --chart-3: 219 92% 19%;
  --chart-4: 178 63% 48%;
  --chart-5: 205 81% 47%;
}

.dark {
  --background: 219 92% 10%;
  --foreground: 180 25% 98%;
  --card: 217 35% 14%;
  --card-foreground: 180 25% 98%;
  --popover: 217 35% 14%;
  --popover-foreground: 180 25% 98%;
  --primary: 178 70% 48%;
  --primary-foreground: 219 92% 8%;
  --secondary: 217 25% 20%;
  --secondary-foreground: 180 25% 98%;
  --muted: 217 25% 17%;
  --muted-foreground: 205 14% 78%;
  --accent: 178 30% 20%;
  --accent-foreground: 180 25% 98%;
  --destructive: 0 72% 55%;
  --destructive-foreground: 0 0% 100%;
  --success: 178 65% 48%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 26 83% 14%;
  --info: 205 81% 58%;
  --info-foreground: 0 0% 100%;
  --border: 217 18% 28%;
  --input: 217 18% 28%;
  --ring: 178 70% 48%;
  --chart-1: 178 70% 48%;
  --chart-2: 205 81% 58%;
  --chart-3: 178 45% 70%;
  --chart-4: 205 60% 45%;
  --chart-5: 219 40% 60%;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@keyframes shadcn-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shadcn-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

[data-slot="toast-viewport"] {
  position: fixed;
  z-index: 100;
  display: flex;
  max-height: 100vh;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  pointer-events: none;
}

@media (min-width: 640px) {
  [data-slot="toast-viewport"] {
    bottom: 0;
    right: 0;
    top: auto;
    width: 420px;
  }
}

[data-slot="toast"] {
  pointer-events: auto;
  position: relative;
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  animation: shadcn-toast-in 180ms ease-out;
}

[data-slot="toast"][data-state="closed"] {
  animation: shadcn-toast-out 160ms ease-in forwards;
}

[data-slot="toast"][data-variant="success"] {
  border-color: hsl(var(--success) / 0.4);
  background: color-mix(in srgb, hsl(var(--success)), black 18%);
  color: hsl(var(--success-foreground));
}

[data-slot="toast"][data-variant="destructive"] {
  border-color: hsl(var(--destructive) / 0.4);
  background: color-mix(in srgb, hsl(var(--destructive)), black 18%);
  color: hsl(var(--destructive-foreground));
}

[data-slot="toast"][data-variant="warning"] {
  border-color: hsl(var(--warning) / 0.4);
  background: color-mix(in srgb, hsl(var(--warning)), black 18%);
  color: hsl(var(--warning-foreground));
}

[data-slot="toast"][data-variant="info"] {
  border-color: hsl(var(--info) / 0.4);
  background: color-mix(in srgb, hsl(var(--info)), black 18%);
  color: hsl(var(--info-foreground));
}

[data-slot="toast-title"] {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

[data-slot="toast-description"] {
  font-size: 0.875rem;
  opacity: 0.9;
  line-height: 1.4;
}

[data-slot="toast-close"] {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 2px);
  opacity: 0.7;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

[data-slot="toast-close"]:hover {
  opacity: 1;
  background: rgb(0 0 0 / 0.08);
}
