@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
@import "tailwindcss";

:root {
    --primary: #8B5CF6;
    --primary-light: #8b5cf63d;
    --primary-hover: #7C3AED;
    --secondary: #F3F4F6;
    --background: #FFFFFF;
    --foreground: #0F172A;
    --card: #FFFFFF;
    --border: #E2E8F0;
    --muted: #79828f;
    --destructive: #EF4444;
    --radius: 0.5rem;
    --input: #f8f8f8;
}

.dark {
    --primary: #a78bfa;
    --primary-light: #312e81;
    --primary-hover: #6d28d9;
    --secondary: #181818;
    --background: #141416;
    --foreground: #f1f5f9;
    --card: #23272f;
    --border: #27272a;
    --muted: #a1a1aa;
    --destructive: #ef4444;
    --input: #27272a;
}

body {
    font-family: "Karla", sans-serif;
    line-height: 1.6;
    color: var(--foreground);
    background-color: var(--background);
}

a {
    text-decoration: none;
    color: var(--primary);
}

ul {
    list-style: none;
}

button, .btn {
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

video {
    outline: 4px solid var(--background);
    outline-offset: -4px;
}