:root {
    --white: #ffffff;

    --black: #000000;

    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;

    --gray-700: #374151;

    --yellow-300: oklch(90.5% 0.182 98.111);
    --yellow-400: #d4af37;
    --yellow-500: #eab308;

    --green-600: #16a34a;

    --red-600: #dc2626;

    --border-green-200: #bbf7d0;
    --border-red-200: #fecaca;

    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    --opacity-100: 1;

    --scale-103: 1.03;
    --scale-105: 1.05;

    --cursor-pointer: pointer;
}

.side-panel {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.side-panel.open {
    opacity: 1;
    transform: translateX(0);
}

.form-group .form-group-error-text-content {
    color: var(--red-600);
}

.form-group.success input {
    border-color: var(--green-600);
}

.form-group.success textarea {
    border-color: var(--green-600);
}

.form-group.error input {
    border-color: var(--red-600);
}

.form-group.error textarea {
    border-color: var(--red-600);
}