@import 'tailwindcss';

@theme {
    --color-background: #0f172a;
    --color-foreground: #f8fafc;
    --color-card: #1e293b;
    --color-card-foreground: #f8fafc;
    --color-primary: #e2136e;
    --color-primary-foreground: #ffffff;
    --color-accent: #334155;
    --color-accent-foreground: #f8fafc;
    --color-muted: #334155;
    --color-muted-foreground: #94a3b8;
    --color-border: #334155;
    --color-destructive: #ef4444;
    --color-destructive-foreground: #ffffff;
    --font-display: 'Space Grotesk', sans-serif;
    --font-sans: 'DM Sans', sans-serif;
}

body {
    font-family: var(--font-sans);
}

.font-display {
    font-family: var(--font-display);
}

.card-elevated {
    background: var(--color-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
}

.glow-primary {
    box-shadow: 0 0 20px rgba(226, 19, 110, 0.25);
}

input, select, textarea {
    color: var(--color-foreground);
}

input:focus, select:focus, textarea:focus {
    outline: none;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

@media print {
    aside, header, button, form, dialog, .no-print {
        display: none !important;
    }
    main {
        margin: 0;
        padding: 0;
    }
}