@import "tailwindcss";
@plugin "tailwindcss-animate";

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@theme {
  /* Breakpoints */
  --breakpoint-2xl: 1400px;

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

  /* Colors */
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-light: hsl(var(--primary-light));
  --color-primary-lighter: hsl(var(--primary-lighter));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-secondary-light: hsl(var(--secondary-light));

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

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

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

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

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-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-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  /* Background Images */
  --background-image-gradient-primary: var(--gradient-primary);
  --background-image-gradient-secondary: var(--gradient-secondary);
  --background-image-gradient-warm: var(--gradient-warm);
  --background-image-gradient-hero: var(--gradient-hero);

  /* Shadows */
  --shadow-soft: var(--shadow-soft);
  --shadow-medium: var(--shadow-medium);
  --shadow-strong: var(--shadow-strong);
  --shadow-glow: var(--shadow-glow);

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

  /* Transition Timing */
  --ease-smooth: var(--transition-smooth);
  --ease-bounce: var(--transition-bounce);

  /* Animations */
  --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(--radix-accordion-content-height);
    }
  }

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

    to {
      height: 0;
    }
  }
}

@layer base {
  :root {

    /* Core brand colors - Professional navy theme */
    --background: 0 0% 100%;
    --foreground: 220 15% 25%;

    --card: 0 0% 100%;
    --card-foreground: 220 15% 25%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 25%;

    /* Primary - Deep navy for trust and professionalism */
    --primary: 220 85% 15%;
    --primary-foreground: 0 0% 98%;
    --primary-light: 220 50% 35%;
    --primary-lighter: 220 30% 85%;

    /* Secondary - Vibrant blue for interaction */
    --secondary: 210 100% 60%;
    --secondary-foreground: 0 0% 98%;
    --secondary-light: 210 100% 75%;

    /* Accent - Warm gradient tones */
    --accent: 45 100% 70%;
    --accent-foreground: 220 15% 25%;
    --accent-secondary: 25 95% 65%;

    /* Neutral grays */
    --muted: 220 10% 96%;
    --muted-foreground: 220 10% 45%;
    --muted-dark: 220 15% 88%;

    /* Status colors */
    --success: 142 76% 36%;
    --success-foreground: 0 0% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    /* UI elements */
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 220 85% 15%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg,
        hsl(220 85% 15%),
        hsl(220 50% 35%));
    --gradient-secondary: linear-gradient(135deg,
        hsl(210 100% 60%),
        hsl(210 100% 75%));
    --gradient-warm: linear-gradient(135deg, hsl(45 100% 70%), hsl(25 95% 65%));
    --gradient-hero: linear-gradient(135deg,
        hsl(220 85% 15%) 0%,
        hsl(220 50% 35%) 50%,
        hsl(210 100% 60%) 100%);

    /* Shadows */
    --shadow-soft: 0 2px 8px hsl(220 15% 25% / 0.08);
    --shadow-medium: 0 4px 16px hsl(220 15% 25% / 0.12);
    --shadow-strong: 0 8px 32px hsl(220 15% 25% / 0.16);
    --shadow-glow: 0 0 32px hsl(210 100% 60% / 0.3);

    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --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: 210 40% 98%;
    --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%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

#nprogress .bar {
  background: var(--gradient-primary);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  box-shadow: 0 2px 10px hsl(210 100% 60% / 0.3);
  border-radius: 0 0 4px 4px;
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px hsl(220 85% 15%), 0 0 5px hsl(220 85% 15%);
  opacity: 1;
  transform: rotate(3deg) translate(0px, -4px);
}

#nprogress .spinner {
  display: none !important;
}

/* End Progress Bar */

/* Start Video Studio */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mask-fade {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.animate-pulse-slow {
  animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-slow {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

/* End Video Studio */

/* Start Premium Prose Tables */
@layer base {
  .prose table {
    @apply w-full border-separate border-spacing-0 border border-border/60 rounded-xl overflow-hidden shadow-soft my-8;
  }

  .prose thead {
    @apply bg-muted/50 border-b border-border;
  }

  .prose th {
    @apply px-4 py-3 text-left text-sm font-bold text-primary uppercase tracking-wider border-b border-border;
  }

  .prose td {
    @apply px-4 py-4 text-sm text-foreground/80 border-b border-border/40 bg-card/30 transition-colors;
  }

  .prose tr:last-child td {
    @apply border-b-0;
  }

  .prose tr:hover td {
    @apply bg-primary/5 text-primary;
  }

  .prose strong {
    @apply text-primary font-bold;
  }
}

/* End Premium Prose Tables */

@keyframes pulse-subtle {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.85;
    transform: scale(0.98);
  }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}