@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

@layer base {
    :root {
        --color-background: #FFFFFF;
        --color-card: #FFFFFF;
        --color-card-hover: #F9FAFB;
        --color-card-muted: #F3F4F6;
        --color-border: rgba(0, 0, 0, 0.1);
        --color-text-primary: #111827;
        --color-text-subtitle: #6B7280;
        --color-primary: #8268F9;
        --color-primary-dark: #6B4DF7;
        --color-primary-ring: rgba(130, 104, 249, 0.2);
        --color-success: #10B981;
        --color-warning: #F59E0B;
        --color-error: #EF4444;
        --color-success-light: #D1FAE5;
        --color-warning-light: #FEF3C7;
        --color-error-light: #FEE2E2;
        --color-tab-bg: #F3F4F6;
        --color-table-header-bg: #F9FAFB;
        --color-input-bg: #FAFAFA;
        --color-input-border: #f1f1f1;
        --color-input-text: #191919;
    }

    :root.dark {
        --color-background: #181819;
        --color-card: #28282C;
        --color-card-hover: #323236;
        --color-card-muted: #1F1F23;
        --color-border: rgba(255, 255, 255, 0.1);
        --color-text-primary: #FFFFFF;
        --color-text-subtitle: rgba(255, 255, 255, 0.7);
        --color-primary: #2EE1D5;
        --color-primary-dark: #25C4BA;
        --color-primary-ring: rgba(46, 225, 213, 0.2);
        --color-success: #059669;
        --color-warning: #D97706;
        --color-error: #DC2626;
        --color-success-light: rgba(16, 185, 129, 0.2);
        --color-warning-light: rgba(245, 158, 11, 0.2);
        --color-error-light: rgba(239, 68, 68, 0.2);
        --color-tab-bg: #1F1F23;
        --color-table-header-bg: #323236;
        --color-input-bg: #1F1F23;
        --color-input-border: #323236;
        --color-input-text: #FFFFFF;
    }

    body {
        @apply bg-background text-text-primary;
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium transition-all duration-200;
    }

    .btn-primary {
        @apply btn bg-primary text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary-ring;
    }

    .btn-secondary {
        @apply btn border border-card-border hover:border-primary focus:outline-none focus:ring-2 focus:ring-primary-ring;
    }

    .card {
        @apply bg-card border border-card-border rounded-lg shadow-sm transition-colors duration-200;
    }

    .card-header {
        @apply px-6 py-4 border-b border-card-border;
    }

    .card-title {
        @apply text-lg font-medium text-primary;
    }

    .card-subtitle {
        @apply text-sm text-secondary mt-1;
    }

    .card-content {
        @apply p-6;
    }

    .card-footer {
        @apply px-6 py-4 bg-card-muted border-t border-card-border;
    }

    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .badge-success {
        @apply bg-success-light text-success;
    }

    .badge-warning {
        @apply bg-warning-light text-warning;
    }

    .badge-error {
        @apply bg-error-light text-error;
    }

    .tab-container {
        @apply bg-tab;
    }

    .table-header {
        @apply bg-table-header;
    }

    /* OAuth Buttons Base */
    .oauth-btn {
        @apply inline-flex items-center gap-2 w-full justify-center px-6 py-3 rounded-md
        font-medium text-white transition-all duration-200 ease-in-out;
    }

    .oauth-btn:hover {
        @apply opacity-90;
    }

    /* OAuth Provider-Specific Styles */
    .oauth-btn.oauth-google {
        @apply bg-[#DB4437] !important;
    }


    .oauth-btn.oauth-apple {
        @apply bg-[#000000] !important;
    }

    .oauth-btn.oauth-facebook {
        @apply bg-[#4267B2] !important;
    }

    .oauth-btn.oauth-github {
        @apply bg-[#333333] !important;
    }

    .oauth-btn.oauth-twitter {
        @apply bg-[#1DA1F2] !important;
    }

    /* Icon Styles */
    .oauth-btn i {
        @apply text-xl;
    }

    /* Google Sign-In Button */
    .gsi-material-button {
        @apply select-none appearance-none bg-white border border-[#747775] rounded-[4px]
        box-border text-[#1f1f1f] cursor-pointer font-['Roboto',arial,sans-serif]
        text-sm h-10 tracking-[0.25px] outline-none overflow-hidden py-0 px-3
        relative text-center transition-[background-color,border-color,box-shadow]
        duration-[0.218s] align-middle whitespace-nowrap w-auto max-w-[400px]
        min-w-full;
    }

    .gsi-material-button:hover {
        @apply border-[#747775] shadow-[0_1px_2px_0_rgba(60,64,67,0.3),0_1px_3px_1px_rgba(60,64,67,0.15)];
    }

    .gsi-material-button:active {
        @apply bg-[#f2f2f2];
    }

    .gsi-material-button-state {
        @apply transition-[opacity,background-color] duration-[0.218s] absolute left-0 right-0 top-0 bottom-0;
    }

    .gsi-material-button-content-wrapper {
        @apply flex items-center justify-center space-x-3 h-full w-full;
    }

    .gsi-material-button-icon {
        @apply h-[18px] min-w-[18px] w-[18px];
    }

    .gsi-material-button-contents {
        @apply flex items-center text-[14px] font-medium;
    }

    /* Apple Sign In Button */
    .apple-auth-button {
        @apply select-none appearance-none bg-black hover:bg-[#1d1d1d]
        rounded-[4px] box-border text-white cursor-pointer
        font-[-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica_Neue',sans-serif]
        text-[15px] h-[40px] tracking-[-0.24px] outline-none overflow-hidden
        py-0 px-[16px] relative text-center transition-colors duration-[0.2s]
        align-middle whitespace-nowrap w-full max-w-[400px] min-w-full
        border-0 font-medium;
    }

    .apple-auth-button:active {
        @apply bg-[#131314];
    }

    .apple-auth-button-content-wrapper {
        @apply flex items-center justify-center space-x-[6px] h-full w-full;
    }

    .apple-auth-button-icon {
        @apply h-[20px] w-[20px] flex items-center justify-center;
    }

    .apple-auth-button-icon svg {
        @apply h-[20px] w-[20px] fill-white;
    }

    .apple-auth-button-text {
        @apply flex items-center text-[15px] font-medium leading-[24px]
        tracking-[-0.24px];
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .apple-auth-button {
            @apply bg-white text-black;
        }

        .apple-auth-button:hover {
            @apply bg-[#f5f5f5];
        }

        .apple-auth-button:active {
            @apply bg-[#e5e5e5];
        }

        .apple-auth-button-icon svg {
            @apply fill-black;
        }
    }
}