@import "tailwindcss";

@theme {
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;

  /* Primary: Warm earth tones — restrained */
  --color-brand-900: #3d2518;
  --color-brand-800: #7c2d12;
  --color-brand-700: #9a3412;
  --color-brand-600: #c2410c;
  --color-brand-500: #ea580c;
  --color-brand-400: #f97316;
  --color-brand-300: #fb923c;
  --color-brand-200: #fdba74;
  --color-brand-100: #ffedd5;
  --color-brand-50: #fff7ed;

  /* Neutrals */
  --color-warm-900: #1d1d1f;
  --color-warm-800: #333336;
  --color-warm-700: #57534e;
  --color-warm-600: #6e6e73;
  --color-warm-500: #a1a1a6;
  --color-warm-400: #d2d2d7;
  --color-warm-300: #e8e8ed;
  --color-warm-200: #f5f5f7;
  --color-warm-100: #fafafa;
  --color-warm-50: #fbfbfd;

  /* Card borders */
  --color-card-border: #e8e8ed;
  --color-card-border-hover: #d2d2d7;

  /* Semantic colors */
  --color-success: #34a853;
  --color-warning: #f59e0b;
  --color-error: #dc2626;
}

@layer components {
  .input-underline {
    @apply w-full px-0 py-3 text-sm text-warm-800 bg-transparent
      border-0 border-b border-warm-300
      placeholder:text-warm-500
      focus:border-warm-800 focus:ring-0 focus:outline-none
      transition-colors duration-200;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center
      px-5 py-2.5 text-sm font-medium
      text-white bg-warm-900 rounded-full cursor-pointer
      hover:bg-warm-800
      focus:outline-none focus:ring-2 focus:ring-warm-400 focus:ring-offset-2
      transition-colors duration-200;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center
      px-5 py-2.5 text-sm font-medium
      text-warm-800 bg-transparent border border-warm-300 rounded-full
      hover:bg-warm-200
      focus:outline-none focus:ring-2 focus:ring-warm-400 focus:ring-offset-2
      transition-colors duration-200 cursor-pointer;
  }

  .card {
    @apply bg-white rounded-2xl
      transition-all duration-200;
    border: 1px solid var(--color-card-border);
  }

  .card-hover:hover {
    border-color: var(--color-card-border-hover);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  a.brand-link {
    @apply text-brand-600 hover:text-brand-700 transition-colors duration-200;
  }
}