@import 'tailwindcss';

@plugin 'tailwindcss-animate';

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

@theme {
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --color-background: oklch(var(--background));
  --color-foreground: oklch(var(--foreground));

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

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

  --color-primary: oklch(var(--primary));
  --color-primary-foreground: oklch(var(--primary-foreground));

  --color-secondary: oklch(var(--secondary));
  --color-secondary-foreground: oklch(var(--secondary-foreground));

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

  --color-accent: oklch(var(--accent));
  --color-accent-foreground: oklch(var(--accent-foreground));

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

  --color-border: oklch(var(--border));
  --color-input: oklch(var(--input));
  --color-ring: oklch(var(--ring));

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

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

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

  /* Add standard shadcn animation durations */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  /* Add standard shadcn easings */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Add standard shadcn animations */
  --animate-in: animate-in var(--duration-normal) var(--ease-out);
  --animate-out: animate-out var(--duration-normal) var(--ease-in);
  
  --animate-fade-in: fade-in var(--duration-normal) var(--ease-out);
  --animate-fade-out: fade-out var(--duration-normal) var(--ease-in);
  
  --animate-slide-in-from-top: slide-in-from-top var(--duration-normal) var(--ease-out);
  --animate-slide-out-to-top: slide-out-to-top var(--duration-normal) var(--ease-in);
  
  --animate-slide-in-from-bottom: slide-in-from-bottom var(--duration-normal) var(--ease-out);
  --animate-slide-out-to-bottom: slide-out-to-bottom var(--duration-normal) var(--ease-in);
  
  --animate-slide-in-from-left: slide-in-from-left var(--duration-normal) var(--ease-out);
  --animate-slide-out-to-left: slide-out-to-left var(--duration-normal) var(--ease-in);
  
  --animate-slide-in-from-right: slide-in-from-right var(--duration-normal) var(--ease-out);
  --animate-slide-out-to-right: slide-out-to-right var(--duration-normal) var(--ease-in);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
  :root {
    /* Catppuccin Latte - Enhanced */
    --background: 0.98 0.005 235; /* base - slightly brighter */
    --foreground: 0.25 0.02 235; /* text - darker for contrast */
    --card: 1.0 0.005 235; /* pure white for cards */
    --card-foreground: 0.25 0.02 235;
    --popover: 1.0 0.005 235;
    --popover-foreground: 0.25 0.02 235;
    --primary: 0.60 0.18 250; /* lavender - more saturated */
    --primary-foreground: 1.0 0.005 235;
    --secondary: 0.92 0.04 235; /* surface1 - more distinct */
    --secondary-foreground: 0.25 0.02 235;
    --muted: 0.95 0.03 235; /* surface0 - slightly more color */
    --muted-foreground: 0.45 0.03 235; /* subtext0 - better contrast */
    --accent: 0.70 0.18 290; /* mauve - more saturated */
    --accent-foreground: 0.25 0.02 235;
    --destructive: 0.70 0.28 0; /* red - more vibrant */
    --destructive-foreground: 1.0 0.005 235;
    --border: 0.90 0.04 235; /* surface1 - more visible */
    --input: 0.90 0.04 235;
    --ring: 0.60 0.18 250; /* matching primary */
    --chart-1: 0.70 0.28 0; /* red - more vibrant */
    --chart-2: 0.80 0.25 30; /* peach - more saturated */
    --chart-3: 0.85 0.20 90; /* yellow - more saturated */
    --chart-4: 0.75 0.20 150; /* green - more saturated */
    --chart-5: 0.65 0.20 180; /* blue - more saturated */
    --radius: 0.5rem;
  }

  .dark {
    /* Catppuccin Mocha - Enhanced */
    --background: 0.25 0.03 256; /* base #1e1e2e */
    --foreground: 0.98 0.02 256; /* text #cdd6f4 - slightly brighter */
    --card: 0.27 0.03 256; /* slightly lighter than background */
    --card-foreground: 0.98 0.02 256;
    --popover: 0.27 0.03 256;
    --popover-foreground: 0.98 0.02 256;
    --primary: 0.80 0.15 270; /* lavender #b4befe - more saturated */
    --primary-foreground: 0.20 0.02 256;
    --secondary: 0.32 0.04 256; /* surface1 #313244 - more distinct */
    --secondary-foreground: 0.98 0.02 256;
    --muted: 0.29 0.03 256; /* surface0 #2a2b3c */
    --muted-foreground: 0.85 0.03 256; /* subtext0 - brighter */
    --accent: 0.75 0.18 300; /* mauve #cba6f7 - more saturated */
    --accent-foreground: 0.20 0.02 256;
    --destructive: 0.75 0.28 10; /* red #f38ba8 - more vibrant */
    --destructive-foreground: 0.98 0.02 256;
    --border: 0.32 0.04 256; /* slightly more visible borders */
    --input: 0.32 0.04 256;
    --ring: 0.80 0.15 270; /* matching primary */
    --chart-1: 0.75 0.28 10; /* red #f38ba8 */
    --chart-2: 0.85 0.22 40; /* peach #fab387 */
    --chart-3: 0.88 0.18 95; /* yellow #f9e2af */
    --chart-4: 0.80 0.18 155; /* green #a6e3a1 */
    --chart-5: 0.70 0.18 190; /* blue #89b4fa */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
