@tailwind base;
@tailwind components;
@tailwind utilities;

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

@layer base {
  :root {
    /* CREAL Brand Colors */
    --brand-yellow: 45 100% 65%; /* #FFCC4E */
    --brand-navy: 218 49% 22%; /* #1A2A4F */
    --brand-black: 0 0% 0%;
    --brand-white: 0 0% 100%;
    --brand-gray: 30 3% 63%; /* #A39F94 */
    --brand-coral: 13 59% 61%; /* #D77A61 */

    /* Light Theme */
    --background: 40 20% 98%;
    --foreground: 218 49% 22%;

    --card: 0 0% 100%;
    --card-foreground: 218 49% 22%;

    --popover: 0 0% 100%;
    --popover-foreground: 218 49% 22%;

    --primary: 218 49% 22%; /* Navy */
    --primary-foreground: 0 0% 100%;

    --secondary: 45 100% 65%; /* Yellow */
    --secondary-foreground: 218 49% 22%;

    --muted: 40 15% 94%;
    --muted-foreground: 218 20% 45%;

    --accent: 45 100% 65%;
    --accent-foreground: 218 49% 22%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 40 10% 88%;
    --input: 40 10% 88%;
    --ring: 45 100% 65%;

    --radius: 0.75rem;

    /* Premium Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    
    /* Premium elevation */
    --elevation-1: 0 2px 8px rgba(26, 42, 79, 0.06);
    --elevation-2: 0 4px 16px rgba(26, 42, 79, 0.08);
    --elevation-3: 0 8px 24px rgba(26, 42, 79, 0.12);

    /* Glass effect */
    --glass-bg: 0 0% 100% / 0.7;
    --glass-border: 0 0% 100% / 0.2;
    --glass-blur: 20px;

    --sidebar-background: 218 49% 22%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 45 100% 65%;
    --sidebar-primary-foreground: 218 49% 22%;
    --sidebar-accent: 218 49% 28%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 218 49% 28%;
    --sidebar-ring: 45 100% 65%;
  }

  .dark {
    --background: 218 49% 10%;
    --foreground: 0 0% 98%;

    --card: 218 49% 14%;
    --card-foreground: 0 0% 100%;

    --popover: 218 49% 14%;
    --popover-foreground: 0 0% 100%;

    --primary: 45 100% 65%;
    --primary-foreground: 218 49% 22%;

    --secondary: 218 49% 20%;
    --secondary-foreground: 0 0% 100%;

    --muted: 218 49% 18%;
    --muted-foreground: 40 10% 65%;

    --accent: 45 100% 65%;
    --accent-foreground: 218 49% 22%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 218 49% 22%;
    --input: 218 49% 22%;
    --ring: 45 100% 65%;
    
    --elevation-1: 0 2px 8px rgba(0, 0, 0, 0.3);
    --elevation-2: 0 4px 16px rgba(0, 0, 0, 0.4);
    --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.5);

    --glass-bg: 218 49% 14% / 0.8;
    --glass-border: 0 0% 100% / 0.1;

    --sidebar-background: 218 49% 16%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 45 100% 65%;
    --sidebar-primary-foreground: 218 49% 22%;
    --sidebar-accent: 218 49% 22%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 218 49% 22%;
    --sidebar-ring: 45 100% 65%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tight font-semibold;
  }
}

@layer utilities {
  /* Glass morphism */
  .glass {
    @apply bg-white/70 backdrop-blur-xl border border-white/20;
  }
  
  .glass-card {
    @apply bg-white/80 backdrop-blur-xl border border-white/30 shadow-soft;
  }
  
  .glass-dark {
    @apply bg-primary/80 backdrop-blur-xl border border-white/10;
  }

  /* Gradient text */
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80;
  }
  
  .text-gradient-accent {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-yellow via-brand-coral to-brand-yellow;
    background-size: 200% auto;
  }

  /* Premium hover effects */
  .hover-lift {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-soft-lg;
  }
  
  .hover-scale {
    @apply transition-transform duration-300 hover:scale-[1.02];
  }

  .hover-glow {
    @apply transition-shadow duration-300 hover:shadow-glow-yellow;
  }

  /* Animation fill mode */
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-scale-in,
  .animate-slide-up,
  .animate-blur-in {
    animation-fill-mode: forwards;
  }

  /* Stagger animation delays */
  .stagger-1 { animation-delay: 0.1s; }
  .stagger-2 { animation-delay: 0.2s; }
  .stagger-3 { animation-delay: 0.3s; }
  .stagger-4 { animation-delay: 0.4s; }
  .stagger-5 { animation-delay: 0.5s; }
  .stagger-6 { animation-delay: 0.6s; }

  /* Gradient backgrounds */
  .bg-gradient-premium {
    @apply bg-gradient-to-br from-primary via-primary/90 to-primary/80;
  }

  .bg-gradient-warm {
    @apply bg-gradient-to-br from-background via-muted/30 to-background;
  }

  .bg-gradient-glow {
    background: radial-gradient(circle at 50% 0%, hsl(45 100% 65% / 0.1) 0%, transparent 50%);
  }

  /* Premium borders */
  .border-gradient {
    border: 1px solid transparent;
    background: linear-gradient(var(--background), var(--background)) padding-box,
                linear-gradient(135deg, hsl(45 100% 65% / 0.5), hsl(218 49% 22% / 0.2)) border-box;
  }

  /* Focus ring */
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
  }
}

@layer components {
  /* Premium card styles */
  .card-premium {
    @apply bg-card rounded-2xl border border-border/50 shadow-soft 
           transition-all duration-300
           hover:shadow-soft-lg hover:border-accent/20 hover:-translate-y-1;
  }

  .card-glass {
    @apply bg-white/80 backdrop-blur-xl rounded-2xl border border-white/30 shadow-soft
           transition-all duration-300
           hover:shadow-soft-lg hover:bg-white/90;
  }

  /* Premium button base */
  .btn-premium {
    @apply relative overflow-hidden font-semibold transition-all duration-300
           before:absolute before:inset-0 before:bg-gradient-to-r before:from-white/0 before:via-white/20 before:to-white/0
           before:translate-x-[-200%] hover:before:translate-x-[200%] before:transition-transform before:duration-700;
  }

  /* Section spacing */
  .section-padding {
    @apply py-16 md:py-24 lg:py-32;
  }

  .container-tight {
    @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

/* ContentDetail 페이지의 리스트 간격 강제 최소화 */
article.prose ul,
article.prose ol {
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
}

article.prose li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.375 !important;
}

article.prose li p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.375 !important;
}