:root {
    /* Colori base del tema */
    --color-background: #E0EEF4;      /* Azzurro polvere chiaro per lo sfondo */
    --color-surface: #F7F4F3;         /* Bianco leggermente caldo per le cards */
    --color-surface-alt: #D4E5E9;     /* Azzurro chiaro per elementi alternativi */
    
    /* Testi */
    --color-text-primary: #175A6B;   /* Blu-grigio per testo principale */
    --color-text-secondary: #5E7582;  /* Grigio medio per testo secondario */
    
    /* Elementi interattivi */
    --color-primary: #C28673;         /* Verde-azzurro per elementi principali */
    --color-primary-light: #F0E2D5;   /* Verde-azzurro chiaro */
    --color-primary-dark: #2B4141;    /* Verde-azzurro scuro */
    
    /* Bordi e separatori */
    --color-border: #BED8D4;          /* Azzurro chiaro per bordi */
    --color-divider: #C2D1C9;         /* Verde-azzurro chiarissimo per divisori */
    
    /* Feedback states */
    --color-focus: rgba(92, 141, 137, 0.25);  /* Ombra focus basata sul primary */
    
    /* Shadow */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Stili base */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-text-primary);
}

.lead {
    color: var(--color-text-secondary);
}

/* Cards */
.calculator-card {
    background: var(--color-surface);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.3s ease;
}

.calculator-card:hover {
    box-shadow: var(--shadow-md);
}

/* Results section */
.results-card {
    background: var(--color-surface-alt);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.result-item {
    text-align: center;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: 0.5rem;
    margin: 0.5rem;
    transition: all 0.3s ease;
}

.result-item:hover {
    transform: translateY(-2px);
    border-left: 3px solid var(--color-primary);
}

.result-value {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.result-label {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Form elements */
.form-control, .form-select {
    border-color: var(--color-border);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem var(--color-focus);
}

/* Range slider */
.form-range::-webkit-slider-thumb {
    background: var(--color-primary);
}

.form-range::-moz-range-thumb {
    background: var(--color-primary);
}

.form-range::-webkit-slider-runnable-track {
    background: var(--color-primary-light);
}

.form-range::-moz-range-track {
    background: var(--color-primary-light);
}

/* Badge */
.badge.bg-primary {
    background-color: var(--color-primary) !important;
    border: none;
}

/* Icons */
.result-item .fas {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Accordion */
.accordion-button:not(.collapsed) {
    background-color: var(--color-surface-alt);
    color: var(--color-text-primary);
}

.accordion-button:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem var(--color-focus);
}

.accordion-body {
    background-color: var(--color-surface);
}

/* Custom button */
.btn-custom {
    background-color: var(--color-primary);
    border: none;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

.btn-custom:focus {
    box-shadow: 0 0 0 0.25rem var(--color-focus);
}

/* Feedback Form Styling */
.feedback-form-container {
    background-color: #f8f9fa; /* Light grey background */
    border-top: 5px solid #cce7ff; /* Light blue top border - adjusted for better visibility */
    border-radius: 0.5rem; /* Rounded corners */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle shadow */
    border: 1px solid #dee2e6; /* Light grey border */
    border-top-color: #a6d8ff; /* Slightly darker blue for top border */
}

.feedback-form-container h2 {
    color: #00697b; /* Teal color for the heading */
    font-weight: 600;
}

/* Ensure form controls have consistent styling */
.feedback-form-container .form-control,
.feedback-form-container .form-select {
    border-color: #ced4da; /* Standard border color */
}

.feedback-form-container .btn-primary {
    background-color: #0d6efd; /* Standard Bootstrap blue */
    border-color: #0d6efd;
}

.feedback-form-container .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.feedback-form-container .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}