:root {
    /* --- Text Input --- */
    --nh-input-bg: var(--nh-color-bg-surface);
    --nh-input-bg-focus: var(--nh-color-bg-surface);
    --nh-input-bg-disabled: rgba(255, 255, 255, 0.04);
    --nh-input-border: var(--nh-color-border);
    --nh-input-border-hover: var(--nh-color-border-strong);
    --nh-input-border-focus: var(--nh-color-accent);
    --nh-input-border-error: var(--nh-color-error-border);
    --nh-input-border-radius: 6px;
    --nh-input-border-width: 1px;
    --nh-input-text: var(--nh-color-text);
    --nh-input-text-placeholder: var(--nh-color-text-muted);
    --nh-input-text-disabled: var(--nh-color-text-muted);
    --nh-input-focus-ring: rgba(191, 160, 224, 0.25);
    --nh-input-focus-ring-width: 3px;
    --nh-input-padding-x: 12px;
    --nh-input-padding-y: 8px;
    --nh-input-font-size: var(--nh-font-size-sm);
    /* --- Label --- */
    --nh-input-label-text: var(--nh-color-text-muted);
    --nh-input-label-font-size: var(--nh-font-size-sm);
    --nh-input-label-gap: 6px;
    /* --- Helper / Error text below input --- */
    --nh-input-hint-text: var(--nh-color-text-muted);
    --nh-input-hint-font-size: 12px;
    --nh-input-error-text: var(--nh-color-error-icon-fg);
}

.nh-input {
    width: 100%;
    background-color: var(--nh-input-bg);
    color: var(--nh-input-text);
    border: var(--nh-input-border-width) solid var(--nh-input-border);
    border-radius: var(--nh-input-border-radius);
    padding: var(--nh-input-padding-y) var(--nh-input-padding-x);
    font-size: var(--nh-input-font-size);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .nh-input::placeholder {
        color: var(--nh-input-text-placeholder);
    }

    .nh-input:hover {
        border-color: var(--nh-input-border-hover);
    }

    .nh-input:focus {
        border-color: var(--nh-input-border-focus);
        box-shadow: 0 0 0 var(--nh-input-focus-ring-width) var(--nh-input-focus-ring);
    }

    .nh-input:disabled {
        background-color: var(--nh-input-bg-disabled);
        color: var(--nh-input-text-disabled);
        cursor: not-allowed;
    }

    .nh-input.nh-input--error {
        border-color: var(--nh-input-border-error);
    }