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

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.tab-btn {
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #6b7280; /* text-gray-500 */
    border-bottom-width: 2px;
    border-color: transparent;
}

.tab-btn:hover {
    color: #2563eb; /* hover:text-blue-600 */
    border-color: #2563eb; /* hover:border-blue-600 */
}

.tab-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.active-tab {
    color: #2563eb; /* text-blue-600 */
    border-color: #2563eb; /* border-blue-600 */
}

.tab-content {
    padding: 1rem; /* p-4 */
}

.popular-symbol-btn {
    background-color: #e5e7eb; /* bg-gray-200 */
    color: #374151; /* text-gray-700 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
}

.popular-symbol-btn:hover {
    background-color: #d1d5db; /* hover:bg-gray-300 */
}

.popular-symbol-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgba(156, 163, 175, var(--tw-ring-opacity));
}