@import "tailwindcss";
@import "tw-animate-css";

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

@font-face {
  font-family: "InterVariable";
  src: url("/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InterVariable";
  src: url("/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrainsMonoVariable";
  src: url("/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-destructive-foreground: var(--destructive-foreground);
  --font-geist-mono: var(----font-geist-mono);
  --font-geist-sans: var(----font-geist-sans);
  --radius: var(----radius);
}

:root {
  --radius: 0.75rem;
  --background: #f7f8fb;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #00e8ff;
  --primary-foreground: #020617;
  --secondary: #0f172a;
  --secondary-foreground: #f8fafc;
  --muted: #e2e8f0;
  --muted-foreground: #475569;
  --accent: #dff7fb;
  --accent-foreground: #0f172a;
  --destructive: #ef4444;
  --border: #d6d8de;
  --input: #e4e7ec;
  --ring: #00d6eb;
  --chart-1: #00d6eb;
  --chart-2: #0891b2;
  --chart-3: #0e7490;
  --chart-4: #155e75;
  --chart-5: #0f4c5c;
  --sidebar: #f2f5f7;
  --sidebar-foreground: #0f172a;
  --sidebar-primary: #00e8ff;
  --sidebar-primary-foreground: #020617;
  --sidebar-accent: #c4eef6;
  --sidebar-accent-foreground: #0f172a;
  --sidebar-border: #cbd5e1;
  --sidebar-ring: #00d6eb;
  --destructive-foreground: oklch(1 0 0);
  --font-geist-sans: "InterVariable", "Inter", sans-serif;
  --font-geist-mono: "JetBrainsMonoVariable", "JetBrains Mono", monospace;
}

.dark {
  --background: #020617;
  --foreground: #f8fafc;
  --card: #0b1120;
  --card-foreground: #f8fafc;
  --popover: #0b1120;
  --popover-foreground: #f8fafc;
  --primary: #00d6eb;
  --primary-foreground: #041019;
  --secondary: #1f2937;
  --secondary-foreground: #f9fafb;
  --muted: #1e293b;
  --muted-foreground: #cbd5f5;
  --accent: #083344;
  --accent-foreground: #f1f5f9;
  --destructive: #f87171;
  --border: #1f2933;
  --input: #1e2933;
  --ring: #00e6ff;
  --chart-1: #00e6ff;
  --chart-2: #0891b2;
  --chart-3: #0e7490;
  --chart-4: #155e75;
  --chart-5: #0f4c5c;
  --sidebar: #050c16;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #00d6eb;
  --sidebar-primary-foreground: #041019;
  --sidebar-accent: #083344;
  --sidebar-accent-foreground: #f8fafc;
  --sidebar-border: #0f1b2a;
  --sidebar-ring: #00e6ff;
  --destructive-foreground: oklch(1 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans antialiased;
  }
}

@layer components {
  /* Tipografia básica para conteúdos rich text (Tiptap) */
  .rich-text {
    @apply text-foreground;
  }
  .rich-text p { @apply my-2; }
  .rich-text a { @apply text-neutral-900 underline; }
  .rich-text ul { @apply my-2 list-disc ps-5; }
  .rich-text ol { @apply my-2 list-decimal ps-5; }
  .rich-text li { @apply my-1; }
  .rich-text blockquote { @apply my-3 border-l-2 border-muted-foreground/30 ps-3 text-muted-foreground; }
  .rich-text h1 { @apply text-xl font-semibold my-3; }
  .rich-text h2 { @apply text-lg font-semibold my-3; }
  .rich-text h3 { @apply text-base font-semibold my-2; }
  .rich-text code { @apply rounded bg-muted px-1 py-0.5 text-xs; }
  .rich-text pre { @apply my-3 overflow-x-auto rounded bg-muted p-3 text-xs; }

  .rich-text .ProseMirror.is-editor-empty::before,
  .rich-text .ProseMirror p.is-editor-empty:first-child::before {
    color: #94a3b8;
    content: attr(data-placeholder);
    pointer-events: none;
    height: 0;
    float: left;
    font-weight: 400;
  }

  @keyframes recent-ticket-enter {
    0% {
      opacity: 0;
      transform: translateY(-12px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .recent-ticket-enter {
    animation: recent-ticket-enter 0.45s ease-out;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}