@import "tailwindcss";
@import "tw-animate-css";
@import "./plugins/hit-area.css";
@import "./plugins/custom-scrollbar.css";
@import "./plugins/code-highlight.css";
@plugin "@tailwindcss/typography";

/* Tell Tailwind to scan this package's source files for classes */
@source "../";

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

@theme {
  /* Font families */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Container */
  --container-center: true;
  --container-padding: 1rem;
  --container-padding-sm: 2rem;
  --container-padding-lg: 2rem;

  /* Line height */
  --leading-h1: 48px;

  /* Spacing */
  --spacing-18: 72px;

  /* Border radius */
  --radius-2xl: calc(2 * var(--radius));
  --radius-xl: calc(var(--radius) + 4px);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Width utilities */
  --width-modal: 580px;
  --width-modal-md: 670px;
  --width-modal-lg: 720px;

  /* Min width utilities - using CSS naming */
  --width-1-2: 50%;

  /* Max width utilities */
  --max-width-modal-sm: 360px;
  --max-width-modal: 580px;
  --max-width-modal-md: 670px;
  --max-width-modal-lg: 720px;
  --max-width-modal-xl: 1200px;
  --max-width-chat: 1024px;

  /* Transition delay */
  --transition-delay-250: 250ms;

  /* Padding */
  --padding-button-default-vertical: 5px;
}

/* Light theme colors - using CSS variables */
@theme {
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background-code: hsl(var(--background-code));
  --color-background: hsl(var(--background));
  --color-background-gray: hsl(var(--background-gray));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-muted: hsl(var(--primary-muted));
  --color-primary-muted-hover: hsl(var(--primary-muted-hover));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-secondary-muted: hsl(var(--secondary-muted));
  --color-secondary-muted-hover: hsl(var(--secondary-muted-hover));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-success-muted: hsl(var(--success-muted));
  --color-success-muted-foreground: hsl(var(--success-muted-foreground));

  --color-destructive-muted: hsl(var(--destructive-muted));
  --color-destructive-muted-foreground: hsl(var(--destructive-muted-foreground));
  --color-destructive-muted-hover: hsl(var(--destructive-muted-hover));

  --color-warning-muted: hsl(var(--warning-muted));
  --color-warning-muted-foreground: hsl(var(--warning-muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-button: hsl(var(--accent-button));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-purple: hsl(var(--purple));
  --color-purple-foreground: hsl(var(--purple-foreground));
  --color-phrase: hsl(var(--phrase));
  --color-phrase-foreground: hsl(var(--phrase-foreground));

  --color-yellow: hsl(var(--yellow));

  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  --color-scrollbar: hsl(var(--scrollbar));
}

/* Keyframe animations */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes flash-background {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: hsl(var(--accent));
  }
}

@keyframes gradient-animation {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  25% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 8px 2px var(--from-glow-color, hsl(var(--primary) / 0.15));
  }
  50% {
    box-shadow: 0 0 12px 4px var(--to-glow-color, hsl(var(--primary) / 0.3));
  }
  100% {
    box-shadow: 0 0 8px 2px var(--from-glow-color, hsl(var(--primary) / 0.15));
  }
}

@theme {
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-flash: flash-background 1s ease-in-out;
  --animate-text-gradient: gradient-animation 3s linear infinite;
  --animate-shine: shine 12s linear infinite;
  --animate-glow: glow 3s ease-in-out infinite;
  --shadow-popover: var(--shadow-popover);
}

/* CSS variables for theming */
:root {
  --background: 0 0% 100%;
  --background-shadow: 0 0% 0%;
  --background-code: 0 0% 98%;
  --background-gray: 0 0% 99%;
  --foreground: 224 71.5% 4%;
  --card: 0 0% 100%;
  --card-foreground: 223 70% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 223 70% 4%;
  /* --primary: 211 94% 43%; */
  --primary: 210 100% 50%;
  --primary-foreground: 210 20% 98%;
  --primary-muted: 210 100% 96%;
  --primary-muted-hover: 210 100% 97%;
  --secondary: 210 20% 98%;
  --secondary-foreground: 221 39% 11%;
  --secondary-muted: 210 20% 96%;
  --secondary-muted-hover: 210 18% 93%;
  --yellow: 41 96% 91%;
  --purple: 289 51% 92%;
  --purple-foreground: 289 51% 14%;
  --phrase: 271 91% 65%;
  --phrase-foreground: 272 72% 47%;
  --muted: 220 14% 96%;
  --muted-foreground: 211 11% 45%;
  --accent: 210 100% 97%;
  --accent-button: 211 97% 35%;
  --accent-foreground: 211 97% 35%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --destructive-muted: 0 93% 94%;
  --destructive-muted-foreground: 0 74% 42%;
  --destructive-muted-hover: 0 90% 90%;
  --success: 142 72% 29%;
  --success-foreground: 120 87% 97%;
  --success-muted: 141 84% 93%;
  --success-muted-foreground: 142 72% 29%;
  --warning-muted: 48 96% 89%;
  --warning-muted-foreground: 26 90% 37%;
  --border: 0 0% 89.8%;
  --input: 0 0% 84.8%;
  --ring: 211 94% 43%;
  --radius: 0.5rem;
  --button-face-inset-shadow: inset 0 3px 8px 0 rgb(255 255 255 / 0.48);
  --button-face-inset-shadow-hover: inset 0 3px 8px 0 rgb(255 255 255 / 0.3);
  --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%;
  --shadow-popover:
    0px 1px 3px 0px hsl(var(--background-shadow) / 0.1),
    0px 1px 2px -1px hsl(var(--background-shadow) / 0.1),
    0px 0px 6px 0px hsl(var(--background-shadow) / 0.04);
  --scrollbar: 217.9 11.92% 64.26%;
}

.dark {
  --background-code: 0 0% 11%;
  --background-gray: 0 0% 10%;
  --background: 0 0% 7%;
  --background-shadow: 0 0% 100%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 13%;
  --popover-foreground: 0 0% 98%;
  --primary: 211 94% 43%;
  --primary-foreground: 210 20% 98%;
  --primary-muted: 210 100% 12%;
  --primary-muted-hover: 210 100% 16%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 98%;
  --secondary-muted: 0 0% 14%;
  --secondary-muted-hover: 0 0% 18%;
  --yellow: 41 90% 14%;
  --purple: 289 51% 14%;
  --purple-foreground: 289 51% 65%;
  --phrase: 271 91% 65%;
  --phrase-foreground: 269 97% 85%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 211 88% 10%;
  --accent-button: 211 97% 35%;
  --accent-foreground: 211 94% 65%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --destructive-muted: 0 75% 15%;
  --destructive-muted-foreground: 0 75% 56%;
  --destructive-muted-hover: 0 72% 20%;
  --success: 142 76% 36%;
  --success-foreground: 120 87% 97%;
  --success-muted: 141 84% 10%;
  --success-muted-foreground: 142 76% 36%;
  --warning-muted: 48 100% 10%;
  --warning-muted-foreground: 49 100% 36%;
  --border: 231 9% 12.9%;
  --input: 0 0% 14.9%;
  --ring: 205 91% 44%;
  --button-face-inset-shadow: inset 0 3px 8px 0 rgb(255 255 255 / 0.3);
  --button-face-inset-shadow-hover: inset 0 3px 8px 0 rgb(255 255 255 / 0.1);
  --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%;
  --shadow-popover:
    0px 2px 4px 0px hsl(var(--background-shadow) / 0.4),
    0px 1px 3px -1px hsl(var(--background-shadow) / 0.3),
    0px 0px 8px 0px hsl(var(--background-shadow) / 0.2);
  --scrollbar: 217.9 11.92% 64.26%;
}

/* Base styles */
@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}
