/* --- INPUT STYLES --- */
.input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #D6D6D0;
    background: #FFFFFF;
    color: #111111;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.input:focus {
    border-color: #0046E0;
}

.input--invalid {
    border-color: #E03A3A;
}

/* --- STACK LAYOUT ENGINE --- */
.stack {
    display: flex;
    box-sizing: border-box;
}

.stack--column { flex-direction: column; }
.stack--row { flex-direction: row; align-items: center; }

/* Spacing Scale (8px Grid) */
.stack--gap-xs { gap: 8px; }
.stack--gap-sm { gap: 16px; }
.stack--gap-md { gap: 24px; }
.stack--gap-lg { gap: 32px; }
.stack--gap-xl { gap: 40px; }

.stack--pad-xs { padding: 8px; }
.stack--pad-sm { padding: 16px; }
.stack--pad-md { padding: 24px; }
.stack--pad-lg { padding: 32px; }
.stack--pad-xl { padding: 40px; }