/* ROI Calculator Main CSS - Imports all components */

/* Core variables - import these first to ensure availability */
@import 'variables.css';

/* Component files */
@import 'layout.css';
@import 'forms.css';
@import 'results.css';
@import 'comparison.css';
@import 'collapsible.css';
@import 'tooltips.css';

/* Animation for empty results state arrow */
@keyframes arrow-pulse {
    0% {
        transform: translateY(-50%) translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-50%) translateX(-10px);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 0.5;
    }
}

/* Responsive styles - import last to allow overrides */
@import 'responsive.css';

:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

.highlight-gradient {
    background: linear-gradient(135deg, #0066CC 0%, #00B8D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

/* Apply Inter as base font for ROI calculator */
.roi-calculator {
    font-family: var(--font-primary);
}

/* Headers - Space Grotesk for display text */
.roi-calculator h2,
.roi-calculator-card h3,
.roi-calculator-card h3
.roi-results-section h4,
.roi-results-comparison h4,
.roi-section-divider,
.roi-iterations-title {
    font-family: var(--font-display);
    font-weight: 700;
}

/* All numerical values - JetBrains Mono */
.roi-calculator .numerical-value,
.roi-stat-value,
.roi-comparison-number,
.roi-nested-number,
.roi-result-value,
.roi-comparison-value,
.roi-results-highlight-value,
.roi-form-group input[type="number"],
.roi-iteration-input,
.roi-currency-input span,
.roi-iteration-percent,
.roi-results-highlight-unit {
    font-family: var(--font-mono);
    font-weight: 500;
}

/* Labels and body text - Inter */
.roi-form-group label,
.roi-result-label,
.roi-nested-label,
.roi-comparison-metric,
.roi-stat-label,
.roi-comparison-header > div,
.roi-iteration-label {
    font-family: var(--font-primary);
    font-weight: 500;
}

/* Help text and descriptions */
.roi-form-group label .help-text,
.roi-iterations-help,
.roi-cta-subtext,
.roi-results-highlight-subtext,
.roi-empty-results p {
    font-family: var(--font-primary);
    font-weight: 400;
    font-style: italic;
}

/* Buttons */
.roi-button,
#use-benchmark-values,
.roi-cta-button,
.roi-add-iteration,
.roi-iteration-remove {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Ensure proper alignment for currency values */
.roi-currency-input span,
.roi-nested-number,
.roi-result-value,
.roi-comparison-value {
    vertical-align: baseline;
}

/* Specific font sizes for better hierarchy */
.roi-calculator h2 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.roi-calculator-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.roi-results-section h4,
.roi-results-comparison h4 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Improve readability of mono font */
.roi-stat-value {
    font-size: 2.8rem;
    font-weight: 700;
}

.roi-results-highlight-value {
    font-size: 2.5rem;
    font-weight: 700;
}

/* Make input numbers consistent */
.roi-form-group input[type="number"],
.roi-iteration-input {
    font-size: 1rem;
    letter-spacing: 0.02em;
}