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

/* Light theme variables */
:root {
    --background: #ffffff;
    --accent: #2563eb;
    --accent-dark: #1e40af;
    --primary: #cc7d24;
    --primary-dark: #9c601c;
    --primary-fg: #f3f4f6;
    --secondary: #eaebed;
    --secondary-fg: #111827;
    --hinted: #f3f4f6;
    --hinted-fg: #111827;
    --muted: #f3f4f6;
    --muted-fg: #6b7280;
    --input: #e5e7eb;
    --divider: #d1d5db;
    --link-color: #65a0ff;
    --text-color: #000000;
    --border-color: #c7cedb;
}

/* Dark theme variables */
.dark {
    --background: rgb(30, 27, 42);
    --accent: #2563eb;
    --accent-dark: #1e40af;
    --primary: #cc7d24;
    --primary-dark: #9c601c;
    --primary-fg: #f3f4f6;
    --secondary: #eaebed;
    --secondary-fg: #111827;
    --hinted: #f3f4f6;
    --hinted-fg: #111827;
    --muted: #f3f4f6;
    --muted-fg: #6b7280;
    --input: #e5e7eb;
    --divider: #d1d5db;
    --link-color: #65a0ff;
    --text-color: #f3f4f6;
    --border-color: #6b7280;
}

@layer base {
    html,
    body {
        @apply w-full leading-normal;
        color: var(--text-color);
    }

    .hidden {
        display: none;
    }

    h1 {
        @apply font-bold text-xl;
    }

    h2 {
        @apply font-bold text-lg;
    }

    h3 {
        @apply font-bold;
    }

    a {
        @apply break-words text-link;
    }

    iframe {
        outline: none;
    }
}

@layer components {
    * {
        @apply outline-none;
    }
}

@layer utilities {
    i.icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    i.icon > svg {
        @apply w-full h-full;
    }
}
