:root {
    /** alap színek **/
    --color-background: #f8fafc;
    --color-foreground: #020617;

    --color-card: #ffffff;
    --color-card-foreground: #020817;

    --color-primary: #15a38a;
    --color-primary-foreground: #ffffff;

    --color-secondary: #f1f5f9;
    --color-secondary-foreground: #020817;

    --color-muted: #f1f5f9;
    --color-muted-foreground: #64748b;

    --color-accent: #15a38a;
    --color-accent-foreground: #ffffff;

    --color-destructive: #ef4444;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-info: #0ea5e9;

    --color-border: #e2e8f0;
    --color-input: #e2e8f0;
    --color-ring: #15a38a;

    --color-sidebar-background: #f1f5f9;
    --color-sidebar-foreground: #020817;
    --color-sidebar-border: #e2e8f0;

    /** színek átlátszósággal **/
    --background: 210 20% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 168 76% 36%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 20% 94%;
    --muted-foreground: 215 16% 47%;
    --accent: 168 76% 36%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 168 76% 36%;

    --sidebar-background: 210 20% 96%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 168 76% 36%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 20% 92%;
    --sidebar-accent-foreground: 222 47% 11%;
    --sidebar-border: 214 32% 91%;
    --sidebar-ring: 168 76% 36%;

    --radius: 0.75rem;

    --shadow-card: 0 4px 20px -4px rgba(0, 0, 0, 0.1);
    --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --accordion-down: 0.2s ease-out;
    --accordion-up: 0.2s ease-out;
}

.dark {
    /** alap színek **/
    --color-background: #020817;
    --color-foreground: #f8fafc;

    --color-card: #0c1427;
    --color-card-foreground: #f8fafc;

    --color-primary: #1cd1b0;
    --color-secondary: #1e293b;

    --color-muted: #1e293b;
    --color-muted-foreground: #94a3b8;

    --color-border: #1e293b;
    --color-sidebar-background: #020817;

    /** színek átlátszósággal **/
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --card: 222 47% 14%;
    --card-foreground: 210 40% 98%;
    --popover: 222 47% 14%;
    --popover-foreground: 210 40% 98%;
    --primary: 168 76% 42%;
    --primary-foreground: 222 47% 11%;
    --secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    --accent: 217 33% 17%;
    --accent-foreground: 210 40% 98%;
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 168 76% 42%;

    --sidebar-background: 222 47% 11%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-border: 217 33% 17%;

    --shadow-card: 0 4px 20px -4px rgba(0, 0, 0, 0.4);
}

body {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}

.card {
    --bs-card-bg: hsl(var(--card)) !important;
    --bs-card-color: hsl(var(--card-foreground)) !important;
    --bs-card-border-color: hsl(var(--border)) !important;
    --bs-card-border-radius: var(--radius) !important;
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: var(--shadow-card) !important;
}

.form-control, .form-select {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
    border-radius: calc(var(--radius) - 2px) !important;
}

.form-control::placeholder {
    color: hsl(var(--muted-foreground)) !important;
    opacity: 0.8;
}

.form-control:focus, .form-select:focus {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 0.25rem hsla(var(--primary) / 0.25) !important;
    outline: 0;
}

.form-control:-webkit-autofill {
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
    -webkit-box-shadow: 0 0 0px 1000px hsl(var(--background)) inset !important;
}

.btn-primary {
    --bs-btn-bg: hsl(var(--primary)) !important;
    --bs-btn-border-color: hsl(var(--primary)) !important;
    --bs-btn-color: hsl(var(--primary-foreground)) !important;
    --bs-btn-hover-bg: hsla(var(--primary) / 0.9) !important;
    --bs-btn-hover-border-color: hsla(var(--primary) / 0.9) !important;
}

.btn-secondary {
    --bs-btn-bg: hsl(var(--secondary)) !important;
    --bs-btn-border-color: hsl(var(--border)) !important;
    --bs-btn-color: hsl(var(--secondary-foreground)) !important;
}

.bg-background { background-color: hsl(var(--background)) !important; }
.bg-card       { background-color: hsl(var(--card)) !important; }
.bg-primary    { background-color: hsl(var(--primary)) !important; }

.text-primary          { color: hsl(var(--primary)) !important; }
.text-muted-foreground { color: hsl(var(--muted-foreground)) !important; }

.modal-content, .dropdown-menu {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
    border-color: hsl(var(--border)) !important;
}