:root {
    /* Brand Colors extracted from screenshot */
    --brand-primary: #cf1b3a; /* The red from the button */
    --brand-dark: #4b152b;    /* The dark edge of the gradient */
    --brand-gradient: linear-gradient(135deg, #cf1b3a 0%, #4b152b 100%);
    
    /* UI Colors */
    --bg-light: #f4f7f6;
    --text-dark: #2c3e50;
    --text-muted: #6c757d;
    --input-bg: #e8f0fe; /* The slight blue tint from the screenshot inputs */
    --border-color: #e2e8f0;
}

body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
}

.btn-primary:hover {
    background-color: #b31732;
    border-color: #b31732;
}

/* Custom Input Styling matching your screenshot */
.form-control {
    background-color: var(--input-bg);
    border: 1px solid transparent;
    padding: 12px;
}
.form-control:focus {
    background-color: #fff;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(207, 27, 58, 0.25);
}