@import "tailwindcss";

/* @plugin "@tailwindcss/typography"; */
/* @plugin "tailwindcss-react-aria-components"; */
@plugin "tailwindcss-animate";

@import "./theme.css";
@import "./typography.css";

@source "../components/untitled-ui/application/code-snippet/code-snippet.style.css";

@custom-variant dark (.dark-mode &);
@custom-variant label (& [data-label]);
@custom-variant focus-input-within (&:has(input:focus));

@theme {
  /* Font families */
  --font-display: "Inter", "sans-serif";
  --font-body: "Inter", "sans-serif";

  /* Font sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-display-xs: 24px;
  --text-display-sm: 30px;
  --text-display-md: 36px;
  --text-display-lg: 48px;
  --text-display-xl: 60px;
  --text-display-2xl: 72px;

  /* Line heights */
  --leading-xs: 18px;
  --leading-sm: 20px;
  --leading-md: 24px;
  --leading-lg: 28px;
  --leading-xl: 30px;
  --leading-display-xs: 32px;
  --leading-display-sm: 38px;
  --leading-display-md: 44px;
  --leading-display-lg: 60px;
  --leading-display-xl: 72px;
  --leading-display-2xl: 90px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Shadow variables */
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
  --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 25px -5px rgba(16, 24, 40, 0.1);
  --shadow-2xl: 0px 25px 50px -12px rgba(16, 24, 40, 0.25);
  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.4);

  /* Blur variables */
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;
}

/* Definições de cores para shadcn/ui */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 240 100% 40%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --success: 125 83% 44%;
  --success-foreground: 210 40% 98%;
  --warning: 38 92% 50%;
  --warning-foreground: 210 40% 98%;
  --danger: 0 79% 59%;
  --danger-foreground: 210 40% 98%;
  --destructive: 0 79% 59%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 240 100% 40%;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
}

.dark-mode {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 240 100% 50%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --success: 125 83% 44%;
  --success-foreground: 210 40% 98%;
  --warning: 38 92% 50%;
  --warning-foreground: 210 40% 98%;
  --danger: 0 79% 59%;
  --danger-foreground: 210 40% 98%;
  --destructive: 0 79% 59%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 240 100% 50%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

/* Utilitários de cores customizadas para shadcn/ui */
@utility bg-background { background-color: hsl(var(--background)); }
@utility bg-foreground { background-color: hsl(var(--foreground)); }
@utility bg-card { background-color: hsl(var(--card)); }
@utility bg-card-foreground { background-color: hsl(var(--card-foreground)); }
@utility bg-popover { background-color: hsl(var(--popover)); }
@utility bg-popover-foreground { background-color: hsl(var(--popover-foreground)); }
@utility bg-primary { background-color: hsl(var(--primary)); }
@utility bg-primary-foreground { background-color: hsl(var(--primary-foreground)); }
@utility bg-secondary { background-color: hsl(var(--secondary)); }
@utility bg-secondary-foreground { background-color: hsl(var(--secondary-foreground)); }
@utility bg-muted { background-color: hsl(var(--muted)); }
@utility bg-muted-foreground { background-color: hsl(var(--muted-foreground)); }
@utility bg-accent { background-color: hsl(var(--accent)); }
@utility bg-accent-foreground { background-color: hsl(var(--accent-foreground)); }
@utility bg-destructive { background-color: hsl(var(--destructive)); }
@utility bg-destructive-foreground { background-color: hsl(var(--destructive-foreground)); }
@utility bg-success { background-color: hsl(var(--success)); }
@utility bg-success-foreground { background-color: hsl(var(--success-foreground)); }
@utility bg-warning { background-color: hsl(var(--warning)); }
@utility bg-warning-foreground { background-color: hsl(var(--warning-foreground)); }
@utility bg-danger { background-color: hsl(var(--danger)); }
@utility bg-danger-foreground { background-color: hsl(var(--danger-foreground)); }

@utility text-background { color: hsl(var(--background)); }
@utility text-foreground { color: hsl(var(--foreground)); }
@utility text-card { color: hsl(var(--card)); }
@utility text-card-foreground { color: hsl(var(--card-foreground)); }
@utility text-popover { color: hsl(var(--popover)); }
@utility text-popover-foreground { color: hsl(var(--popover-foreground)); }
@utility text-primary { color: hsl(var(--primary)); }
@utility text-primary-foreground { color: hsl(var(--primary-foreground)); }
@utility text-secondary { color: hsl(var(--secondary)); }
@utility text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
@utility text-muted { color: hsl(var(--muted)); }
@utility text-muted-foreground { color: hsl(var(--muted-foreground)); }
@utility text-accent { color: hsl(var(--accent)); }
@utility text-accent-foreground { color: hsl(var(--accent-foreground)); }
@utility text-destructive { color: hsl(var(--destructive)); }
@utility text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
@utility text-success { color: hsl(var(--success)); }
@utility text-success-foreground { color: hsl(var(--success-foreground)); }
@utility text-warning { color: hsl(var(--warning)); }
@utility text-warning-foreground { color: hsl(var(--warning-foreground)); }
@utility text-danger { color: hsl(var(--danger)); }
@utility text-danger-foreground { color: hsl(var(--danger-foreground)); }

@utility border-background { border-color: hsl(var(--background)); }
@utility border-foreground { border-color: hsl(var(--foreground)); }
@utility border-card { border-color: hsl(var(--card)); }
@utility border-card-foreground { border-color: hsl(var(--card-foreground)); }
@utility border-popover { border-color: hsl(var(--popover)); }
@utility border-popover-foreground { border-color: hsl(var(--popover-foreground)); }
@utility border-primary { border-color: hsl(var(--primary)); }
@utility border-primary-foreground { border-color: hsl(var(--primary-foreground)); }
@utility border-secondary { border-color: hsl(var(--secondary)); }
@utility border-secondary-foreground { border-color: hsl(var(--secondary-foreground)); }
@utility border-muted { border-color: hsl(var(--muted)); }
@utility border-muted-foreground { border-color: hsl(var(--muted-foreground)); }
@utility border-accent { border-color: hsl(var(--accent)); }
@utility border-accent-foreground { border-color: hsl(var(--accent-foreground)); }
@utility border-destructive { border-color: hsl(var(--destructive)); }
@utility border-destructive-foreground { border-color: hsl(var(--destructive-foreground)); }
@utility border-border { border-color: hsl(var(--border)); }
@utility border-input { border-color: hsl(var(--input)); }
@utility border-ring { border-color: hsl(var(--ring)); }
@utility border-success { border-color: hsl(var(--success)); }
@utility border-success-foreground { border-color: hsl(var(--success-foreground)); }
@utility border-warning { border-color: hsl(var(--warning)); }
@utility border-warning-foreground { border-color: hsl(var(--warning-foreground)); }
@utility border-danger { border-color: hsl(var(--danger)); }
@utility border-danger-foreground { border-color: hsl(var(--danger-foreground)); }

/* Utilitários personalizados de texto - Extra Small */
@utility text-xs-regular {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-xs-medium {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-xs-semibold {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-xs-bold {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Small */
@utility text-sm-regular {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-sm-medium {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-sm-semibold {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-sm-bold {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Medium */
@utility text-md-regular {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-md-medium {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-md-semibold {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-md-bold {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Large */
@utility text-lg-regular {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-lg-medium {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-lg-semibold {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-lg-bold {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Extra Large */
@utility text-xl-regular {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-xl-medium {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-xl-semibold {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-xl-bold {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Display Extra Small */
@utility text-display-xs-regular {
  font-size: var(--text-display-xs);
  line-height: var(--leading-display-xs);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-display-xs-medium {
  font-size: var(--text-display-xs);
  line-height: var(--leading-display-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-display-xs-semibold {
  font-size: var(--text-display-xs);
  line-height: var(--leading-display-xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-display-xs-bold {
  font-size: var(--text-display-xs);
  line-height: var(--leading-display-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Display Small */
@utility text-display-sm-regular {
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-display-sm-medium {
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-display-sm-semibold {
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-display-sm-bold {
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Display Large */
@utility text-display-lg-regular {
  font-size: var(--text-display-lg);
  line-height: var(--leading-display-lg);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-display-lg-medium {
  font-size: var(--text-display-lg);
  line-height: var(--leading-display-lg);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-display-lg-semibold {
  font-size: var(--text-display-lg);
  line-height: var(--leading-display-lg);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-display-lg-bold {
  font-size: var(--text-display-lg);
  line-height: var(--leading-display-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Display Extra Large */
@utility text-display-xl-regular {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-display-xl-medium {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-display-xl-semibold {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-display-xl-bold {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

/* Utilitários personalizados de texto - Display 2X Large */
@utility text-display-2xl-regular {
  font-size: var(--text-display-2xl);
  line-height: var(--leading-display-2xl);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-body);
}

@utility text-display-2xl-medium {
  font-size: var(--text-display-2xl);
  line-height: var(--leading-display-2xl);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

@utility text-display-2xl-semibold {
  font-size: var(--text-display-2xl);
  line-height: var(--leading-display-2xl);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

@utility text-display-2xl-bold {
  font-size: var(--text-display-2xl);
  line-height: var(--leading-display-2xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-body);
}

@utility scrollbar-hide {
    /* For Webkit-based browsers (Chrome, Safari and Opera) */
    &::-webkit-scrollbar {
        display: none;
        -webkit-appearance: none;
    }

    /* For IE, Edge and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

@utility transition-inherit-all {
    transition-property: inherit;
    transition-duration: inherit;
    transition-timing-function: inherit;
}

html,
body {
    font-family: var(--font-body);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual;
    -webkit-font-kerning: normal;
    font-kerning: normal;
}

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

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.3);
    border-radius: 9999px;
}

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

/* Hide the default expand arrow on Safari.  */
details summary::-webkit-details-marker {
    display: none;
}

/* Hide default arrows from number inputs. */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Hide the default clear button (X) from search inputs. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Animações específicas */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

.animate-slideIn {
  animation: slideIn 0.3s ease-in-out;
}

.focus-ring-shadow-xs-skeuomorphic:focus {
  box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(10, 13, 18, 0.05), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px #3A43FF;
}