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

@layer base {
    :root {
        --portal-color-primary: #dc2626;
        --portal-color-primary-hover: #b91c1c;
        --portal-color-secondary: #111827;
        --portal-color-accent: #ef4444;
        --portal-color-background: #f9fafb;
        --portal-color-surface: #ffffff;
        --portal-color-text: #111827;
        --portal-color-on-primary: #ffffff;
    }
}

@layer components {
    .portal-bg {
        background-color: var(--portal-color-background);
        color: var(--portal-color-text);
    }

    .portal-surface {
        background-color: var(--portal-color-surface);
    }

    .portal-bg-primary {
        background-color: var(--portal-color-primary);
    }

    .portal-bg-secondary {
        background-color: var(--portal-color-secondary);
    }

    .portal-bg-accent {
        background-color: var(--portal-color-accent);
    }

    .portal-text-primary {
        color: var(--portal-color-primary);
    }

    .portal-text-accent {
        color: var(--portal-color-accent);
    }

    .portal-text-on-primary {
        color: var(--portal-color-on-primary);
    }

    .portal-border-primary {
        border-color: var(--portal-color-primary);
    }

    .portal-btn-primary {
        background-color: var(--portal-color-primary);
        color: var(--portal-color-on-primary);
    }

    .portal-btn-primary:hover {
        background-color: var(--portal-color-primary-hover);
    }

    .portal-btn-outline {
        border-color: var(--portal-color-primary);
        color: var(--portal-color-primary);
    }

    .portal-btn-outline:hover {
        background-color: var(--portal-color-primary);
        color: var(--portal-color-on-primary);
    }

    .portal-hover-border-primary:hover {
        border-color: var(--portal-color-primary);
    }

    .portal-hover-text-primary:hover {
        color: var(--portal-color-primary);
    }
}