/* Base Typography */
:root {
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
}

/* Form Elements */
.tool-input,
.tool-select {
    @apply w-full p-3 border rounded-lg bg-white shadow-sm transition-all duration-200
    focus:ring-2 focus:ring-blue-500 focus:border-transparent
    hover:border-gray-400;
    font-size: var(--font-size-base);
}

.tool-label {
    @apply block font-medium text-gray-700 mb-2;
    font-size: var(--font-size-sm);
}

/* Buttons */
.tool-button {
    @apply relative overflow-hidden bg-gradient-to-br from-blue-500 to-blue-600 
    text-white px-6 py-3 rounded-lg font-medium
    flex items-center justify-center gap-2 
    shadow-md hover:shadow-lg
    transform hover:-translate-y-0.5 active:translate-y-0
    transition-all duration-200
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:transform-none;
    font-size: var(--font-size-base);
}

/* Content Typography */
.prose {
    @apply text-gray-800 leading-relaxed;
    font-size: var(--font-size-base);
}

.prose h1 {
    @apply font-bold mb-6 mt-8;
    font-size: var(--font-size-2xl);
}

.prose h2 {
    @apply font-semibold mb-4 mt-6;
    font-size: var(--font-size-xl);
}

.prose h3 {
    @apply font-medium mb-3 mt-5;
    font-size: var(--font-size-lg);
}

.prose p {
    @apply mb-4;
    font-size: var(--font-size-base);
    line-height: 1.7;
}

.prose ul, .prose ol {
    @apply mb-4 ml-4;
    font-size: var(--font-size-base);
}

.prose li {
    @apply mb-2;
    font-size: var(--font-size-base);
}

/* Tool Results */
.tool-result {
    @apply mt-8 p-6 bg-white rounded-lg shadow-sm border border-gray-200;
}

.tool-result h3 {
    @apply font-semibold text-gray-900;
    font-size: var(--font-size-lg);
}

/* Animations */
@keyframes progress-shine {
    from { left: -100%; }
    to { left: 200%; }
}

@keyframes progress-indeterminate {
    0% { left: -40%; width: 40%; }
    100% { left: 100%; width: 40%; }
}

/* Progress Bar */
.animate-progress-indeterminate {
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}

.animate-progress-shine {
    animation: progress-shine 1s ease-in-out infinite;
}