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

@layer base {
  /* Base styles */
  body {
    @apply bg-background text-text;
  }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-md text-body-m font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary/50;
  }

  .btn-secondary {
    @apply bg-transparent border-2 border-primary text-primary hover:bg-primary/10 focus:ring-primary/50;
  }

  .btn-ghost {
    @apply bg-transparent text-text/80 hover:bg-surface-2 focus:ring-primary/50;
  }

  /* Input Fields */
  .input {
    @apply px-4 py-2 rounded-md border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-lg shadow-md p-4 transition-all duration-200;
  }

  .card-hover {
    @apply hover:-translate-y-1 hover:shadow-lg;
  }

  /* Landing page button styles */
  .bg-chaekbot {
    background-color: #D4C4A8;
  }

  .bg-chaekbot-hover {
    background-color: #C9B896;
  }

  .bg-claimmate {
    background-color: #8BC5D6;
  }

  .bg-claimmate-hover {
    background-color: #A0CFDF;
  }

  .bg-parkingo {
    background-color: #006FFF;
  }

  .bg-parkingo-hover {
    background-color: #4A9EFF;
  }

  .bg-rails {
    background-color: #B3312F;
  }

  .bg-rails-hover {
    background-color: #9A2B29;
  }

  /* Chat Elements */
  .chat-bubble {
    @apply rounded-lg p-4 max-w-[80%];
  }

  .chat-bubble-user {
    @apply bg-primary text-white ml-auto;
  }

  .chat-bubble-bot {
    @apply bg-secondary text-text mr-auto;
  }

  /* Typography */
  .text-display {
    @apply text-[2.5rem] leading-[3rem] font-bold;
  }

  .text-h1 {
    @apply text-[2rem] leading-[2.5rem] font-bold;
  }

  .text-h2 {
    @apply text-[1.75rem] leading-[2.25rem] font-bold;
  }

  .text-h3 {
    @apply text-[1.5rem] leading-[2rem] font-semibold;
  }

  .text-h4 {
    @apply text-[1.25rem] leading-[1.75rem] font-semibold;
  }

  .text-body-l {
    @apply text-[1.125rem] leading-[1.75rem];
  }

  .text-body-m {
    @apply text-[1rem] leading-[1.5rem];
  }

  .text-body-s {
    @apply text-[0.875rem] leading-[1.25rem];
  }

  .text-caption {
    @apply text-[0.75rem] leading-[1rem];
  }

  .animate-slide-down {
    animation: slide-down 0.2s ease-out forwards;
  }
}

@layer utilities {
  /* Custom utilities */
  .text-balance {
    text-wrap: balance;
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Buttons */
.btn {
  @apply px-4 py-2 rounded-md font-medium transition-all duration-200;
}

.btn-primary {
  @apply bg-primary text-white hover:bg-primary-light;
}

.btn-secondary {
  @apply bg-transparent border border-primary text-primary hover:bg-primary/10;
}

.btn-ghost {
  @apply bg-white/10 text-white hover:bg-white/15;
}

/* Input Fields */
.input {
  @apply px-4 py-2 rounded-md border border-border focus:border-primary focus:ring-2 focus:ring-primary/20;
}

/* Cards */
.card {
  @apply bg-white rounded-lg shadow-md p-4 transition-all duration-200;
}

.card-hover {
  @apply hover:-translate-y-1 hover:shadow-lg;
}

/* Chat Elements */
.chat-bubble {
  @apply rounded-lg p-4 max-w-[80%];
}

.chat-bubble-user {
  @apply bg-primary text-white ml-auto;
}

.chat-bubble-bot {
  @apply bg-secondary text-text mr-auto;
} 
:root {
  /* Color System */
  --color-primary: #2C4B7C;
  --color-primary-light: #4B7CC2;
  --color-secondary: #E6D5C9;
  --color-secondary-light: #F4E5DC;
  
  /* Functional Colors */
  --color-success: #4CAF50;
  --color-warning: #FFC107;
  --color-error: #FF5252;
  --color-info: #2196F3;
  
  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-background: #F8F9FA;
  --color-text: #212529;
  --color-border: #DEE2E6;
  --color-disabled: #6C757D;
  
  /* Spacing Scale */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-16: 4rem;    /* 64px */
  
  /* Typography */
  --font-family-kr: 'Pretendard', sans-serif;
  --font-family-en: 'Inter', sans-serif;
} 
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */