:root {
  /* Layout and Container */
  --calculator-background-color: #fff;
  --calculator-padding: 20px;
  --calculator-border-radius: 8px;
  --calculator-box-shadow: 0 0 10px rgba(0,0,0,0.1);
  --calculator-max-width: 600px;
  --calculator-margin: 0 auto;
  --calculator-font-family: sans-serif;
  --calculator-color: #333;

  /* Form Elements */
  --calculator-label-color: #333;
  --calculator-input-border-color: #ddd;
  --calculator-input-padding: 8px;
  --calculator-input-border-radius: 4px;

  /* Buttons */
  --calculator-button-color: #007bff;
  --calculator-button-text-color: #fff;
  --calculator-button-padding: 10px 15px;
  --calculator-button-border-radius: 4px;
  --calculator-button-font-size: 16px;

  /* Error Messages */
  --calculator-error-color: red;
  --calculator-error-font-size: 14px;
  --calculator-error-margin-top: 5px;

  /* Result Display */
  --calculator-result-font-size: 18px;
  --calculator-result-font-weight: bold;
  --calculator-result-margin-top: 20px;

    /* Formula Display */
  --calculator-formula-margin-top: 10px;
  --calculator-formula-font-style: italic;
  --calculator-formula-var-font-weight: bold;
  --calculator-formula-var-color: #007bff;
  --calculator-formula-var-transition: color 0.3s ease;
  --calculator-formula-var-highlight-color: #ff6600;

  /* Scenario Builder */
  --calculator-scenario-margin-top: 20px;
  --calculator-scenario-label-display: inline-block;
  --calculator-scenario-label-margin-right: 10px;
  --calculator-scenario-input-width: 70%;
  --calculator-scenario-input-display: inline-block;
  --calculator-scenario-span-display: inline-block;
  --calculator-scenario-span-margin-left: 5px;

    /* Download Button */
  --calculator-download-button-color: #28a745;
  --calculator-download-button-text-color: #fff;
  --calculator-download-button-padding: 10px 15px;
  --calculator-download-button-border-radius: 4px;
  --calculator-download-button-margin-top: 10px;
}

.calculator-container {
    background-color: var(--calculator-background-color);
    padding: var(--calculator-padding);
    border-radius: var(--calculator-border-radius);
    box-shadow: var(--calculator-box-shadow);
    max-width: var(--calculator-max-width);
    margin: var(--calculator-margin);
    font-family: var(--calculator-font-family);
    color: var(--calculator-color);
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--calculator-label-color);
}

input[type="number"], input[type="range"] {
    width: calc(100% - 12px);
    padding: var(--calculator-input-padding);
    border: 1px solid var(--calculator-input-border-color);
    border-radius: var(--calculator-input-border-radius);
    box-sizing: border-box;
}

button {
    background-color: var(--calculator-button-color);
    color: var(--calculator-button-text-color);
    padding: var(--calculator-button-padding);
    border: none;
    border-radius: var(--calculator-button-border-radius);
    cursor: pointer;
    font-size: var(--calculator-button-font-size);
}

button:hover {
    background-color: #0056b3;
}

#result-container {
    margin-top: var(--calculator-result-margin-top);
    font-size: var(--calculator-result-font-size);
    font-weight: var(--calculator-result-font-weight);
}

.error-message {
    color: var(--calculator-error-color);
    font-size: var(--calculator-error-font-size);
    margin-top: var(--calculator-error-margin-top);
}

.formula-display {
    margin-top: var(--calculator-formula-margin-top);
    font-style: var(--calculator-formula-font-style);
}

.formula-var {
    font-weight: var(--calculator-formula-var-font-weight);
    transition: var(--calculator-formula-var-transition);
    color: var(--calculator-formula-var-color);
}

.formula-var.highlight {
    color: var(--calculator-formula-var-highlight-color);
}

.scenario-builder {
    margin-top: var(--calculator-scenario-margin-top);
}

.scenario-builder label {
    display: var(--calculator-scenario-label-display);
    margin-right: var(--calculator-scenario-label-margin-right);
}

.scenario-builder input[type="range"] {
    width: var(--calculator-scenario-input-width);
    display: var(--calculator-scenario-input-display);
}

.scenario-builder span {
    display: var(--calculator-scenario-span-display);
    margin-left: var(--calculator-scenario-span-margin-left);
}

.download-button {
    background-color: var(--calculator-download-button-color);
    color: var(--calculator-download-button-text-color);
    padding: var(--calculator-download-button-padding);
    border: none;
    border-radius: var(--calculator-download-button-border-radius);
    cursor: pointer;
    margin-top: var(--calculator-download-button-margin-top);
}
.download-button:hover {
    background-color: #218838;
}