@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 209 40% 96%;
    --foreground: 222 47% 11%;
    --card: 210 40% 98%;
    --card-foreground: 222 47% 11%;
    --popover: 214 31% 91%;
    --popover-foreground: 222 47% 11%;
    --primary: 200 98% 39%;
    --primary-foreground: 204 100% 97%;
    --secondary: 215 24% 26%;
    --secondary-foreground: 210 40% 98%;
    --muted: 215 20% 65%;
    --muted-foreground: 222 47% 11%;
    --accent: 210 40% 98%;
    --accent-foreground: 215 19% 34%;
    --destructive: 0 72% 50%;
    --destructive-foreground: 0 85% 97%;
    --border: 212 26% 83%;
    --input: 212 26% 83%;
    --ring: 200 98% 39%;
    --chart-1: 198 93% 59%;
    --chart-2: 213 93% 67%;
    --chart-3: 215 20% 65%;
    --chart-4: 215 16% 46%;
    --chart-5: 215 19% 34%;
    --radius: 0.5rem;

    /* Dynamic blue theme enhancements */
    --primary-strong: 222 89% 63%;
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-strong)));
    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Sidebar variables */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 200 98% 39%;
    --sidebar-primary-foreground: 204 100% 97%;
    --sidebar-accent: 215 24% 26%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 212 26% 83%;
    --sidebar-ring: 200 98% 39%;
    --sidebar: 210 40% 98%;
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --card: 217 32% 17%;
    --card-foreground: 210 40% 98%;
    --popover: 215 24% 26%;
    --popover-foreground: 210 40% 98%;
    --primary: 198 93% 59%;
    --primary-foreground: 204 80% 15%;
    --secondary: 212 26% 83%;
    --secondary-foreground: 228 84% 4%;
    --muted: 215 16% 46%;
    --muted-foreground: 210 40% 98%;
    --accent: 228 84% 4%;
    --accent-foreground: 215 20% 65%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 85% 97%;
    --border: 215 19% 34%;
    --input: 215 19% 34%;
    --ring: 198 93% 59%;
    --chart-1: 199 95% 73%;
    --chart-2: 211 96% 78%;
    --chart-3: 215 20% 65%;
    --chart-4: 215 16% 46%;
    --chart-5: 215 19% 34%;

    /* Sidebar dark variables */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 198 93% 59%;
    --sidebar-primary-foreground: 204 80% 15%;
    --sidebar-accent: 215 20% 65%;
    --sidebar-accent-foreground: 228 84% 4%;
    --sidebar-border: 215 19% 34%;
    --sidebar-ring: 198 93% 59%;
    --sidebar: 217 32% 17%;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: "Inter", sans-serif;
  }
}

/* Definir cores no Tailwind */
.sidebar {
  background-color: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
}

.sidebar-accent {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

.sidebar-border {
  border-color: hsl(var(--sidebar-border));
}

@layer utilities {
  .bg-gradient-primary {
    background-image: var(--gradient-primary);
  }

  .btn-gradient {
    color: hsl(var(--primary-foreground));
    background-image: var(--gradient-primary);
    box-shadow: var(--shadow-elegant);
    transition: var(--transition-smooth);
  }
  .btn-gradient:hover {
    filter: brightness(0.95);
  }

  .glass-card {
    background-color: hsl(var(--card) / 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--border) / 0.4);
    box-shadow: var(--shadow-elegant);
  }

  .brand-text {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}