/* Form Element CSS Variables for Kartoos Lesson */

:root {
    /* Basic form control colors */
    --input-bg: #ffffff;
    --input-text: #333333;
    --input-border: rgba(92, 64, 51, 0.15);
    --input-border-focus: var(--primary-color);
    --input-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --input-shadow-focus: 0 0 0 3px rgba(92, 64, 51, 0.2), 0 5px 15px rgba(0, 0, 0, 0.05);
    --input-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.08);
    
    /* Input placeholder */
    --placeholder-color: rgba(0, 0, 0, 0.4);
    
    /* Input dimensions */
    --input-padding-v: 14px;
    --input-padding-h: 18px;
    --input-font-size: 1rem;
    --input-line-height: 1.6;
    --input-border-width: 2px;
    --input-border-radius: var(--input-radius);
    
    /* Text areas */
    --textarea-min-height: 120px;
    --textarea-line-bg: rgba(92, 64, 51, 0.05);
    --textarea-line-height: 32px;
    --textarea-line-bg-focus: rgba(92, 64, 51, 0.1);
    
    /* Select dropdowns */
    --select-arrow-size: 16px;
    --select-arrow-color: var(--primary-color);
    --select-arrow-padding: 40px;
    
    /* Radio buttons */
    --radio-size: 22px;
    --radio-dot-size: 12px;
    --radio-border: rgba(92, 64, 51, 0.3);
    --radio-bg-selected: rgba(92, 64, 51, 0.05);
    
    /* Option containers */
    --option-bg: #f8f9fa;
    --option-bg-hover: #f1f3f5;
    --option-bg-selected: rgba(92, 64, 51, 0.05);
    --option-border-selected: rgba(92, 64, 51, 0.2);
    
    /* Focus effects */
    --focus-ring-color: rgba(92, 64, 51, 0.2);
    --focus-ring-width: 3px;
    --focus-ring-keyboard: rgba(92, 64, 51, 0.3);
    
    /* Feedback colors */
    --input-valid: #4caf50;
    --input-invalid: #f44336;
    --input-warning: #ff9800;
    
    /* Animation durations */
    --input-transition: all 0.3s ease;
    --focus-transition: box-shadow 0.3s ease, border-color 0.3s ease;
    --hover-transition: all 0.2s ease;
}

/* Dark mode variables (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --input-bg: #2c2c2c;
        --input-text: #e0e0e0;
        --input-border: rgba(255, 255, 255, 0.15);
        --input-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        --placeholder-color: rgba(255, 255, 255, 0.3);
        --textarea-line-bg: rgba(255, 255, 255, 0.05);
        --textarea-line-bg-focus: rgba(255, 255, 255, 0.1);
        --option-bg: #3a3a3a;
        --option-bg-hover: #444444;
        --option-bg-selected: rgba(255, 255, 255, 0.1);
        --radio-bg-selected: rgba(255, 255, 255, 0.1);
    }
}

/* Apply CSS variables to selectors */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: var(--input-border-width) solid var(--input-border);
    border-radius: var(--input-border-radius);
    padding: var(--input-padding-v) var(--input-padding-h);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    box-shadow: var(--input-shadow);
    transition: var(--input-transition);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}

input:hover,
textarea:hover,
select:hover {
    box-shadow: var(--input-shadow-hover);
}

::placeholder {
    color: var(--placeholder-color);
}

textarea {
    min-height: var(--textarea-min-height);
    background-image: linear-gradient(
        transparent, 
        transparent calc(var(--textarea-line-height) - 1px), 
        var(--textarea-line-bg) var(--textarea-line-height)
    );
    background-size: 100% var(--textarea-line-height);
}

textarea:focus {
    background-image: linear-gradient(
        transparent, 
        transparent calc(var(--textarea-line-height) - 1px), 
        var(--textarea-line-bg-focus) var(--textarea-line-height)
    );
}

select {
    padding-right: var(--select-arrow-padding);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c4033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: var(--select-arrow-size);
}

.option {
    background: var(--option-bg);
}

.option:hover {
    background: var(--option-bg-hover);
}

.option input[type="radio"] {
    width: var(--radio-size);
    height: var(--radio-size);
    border: var(--input-border-width) solid var(--radio-border);
}

.option input[type="radio"]::before {
    width: var(--radio-dot-size);
    height: var(--radio-dot-size);
}

.option:has(input[type="radio"]:checked) {
    background-color: var(--option-bg-selected);
    border-color: var(--option-border-selected);
}

/* Input validation states */
input.valid,
textarea.valid,
select.valid {
    border-color: var(--input-valid);
    background-color: rgba(76, 175, 80, 0.05);
}

input.invalid,
textarea.invalid,
select.invalid {
    border-color: var(--input-invalid);
    background-color: rgba(244, 67, 54, 0.05);
}