/**
 * Theme-aware component overrides
 * Maps theme variables to component styles
 */

/* Body background */
body {
    background: var(--theme-bg-dark);
    background-image: 
        radial-gradient(circle at 20% 50%, var(--theme-bg-glow-1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--theme-bg-glow-2) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, var(--theme-bg-glow-3) 0%, transparent 40%),
        linear-gradient(180deg, var(--theme-bg-dark) 0%, var(--theme-bg-medium) 100%);
}

/* Header */
.header__title {
    background: var(--theme-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: var(--theme-shadow-glow);
}

/* Buttons */
.btn {
    background: var(--theme-btn-bg);
    border-color: var(--theme-btn-border);
    box-shadow: var(--theme-btn-glow);
}

.btn:hover:not(:disabled) {
    background: var(--theme-btn-hover-bg);
    box-shadow: var(--theme-btn-glow-hover);
    border-color: var(--theme-card-border-hover);
}

.btn.connected {
    background: var(--theme-connected-bg);
    border-color: var(--theme-connected-border);
    box-shadow: var(--theme-connected-glow);
}

/* Cards */
.metric-card,
.workout-section {
    background: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    box-shadow: var(--theme-shadow-card);
}

.metric-card:hover {
    border-color: var(--theme-card-border-hover);
    box-shadow: var(--theme-shadow-card), 0 0 30px var(--theme-card-glow);
}

/* Labels and accents */
.metric-card__label,
.section-title,
.current-phase {
    color: var(--theme-text-accent);
}

.metric-card__unit {
    color: var(--theme-text-secondary-accent);
}

/* Large displays */
.metric-card__value,
.hr-display__value {
    background: var(--theme-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.phase-timer {
    background: var(--theme-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: var(--theme-shadow-glow);
}

/* Progress bar */
.progress-bar__fill {
    background: var(--theme-progress-bg);
    box-shadow: var(--theme-progress-glow);
}

/* Connection panel */
.connection-panel {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-primary) 10%, transparent) 0%, 
        color-mix(in srgb, var(--theme-secondary) 10%, transparent) 100%);
    border-color: var(--theme-card-border);
}

/* HR Zone section */
.hr-zone-header {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-primary) 20%, transparent) 0%, 
        color-mix(in srgb, var(--theme-secondary) 20%, transparent) 100%);
    border-color: var(--theme-card-border);
}

.hr-zone-title {
    color: var(--theme-text-accent);
}

/* Phase items */
.phase-item {
    border-left-color: var(--theme-card-border);
    border-color: rgba(255, 255, 255, 0.1);
}

.phase-item:hover {
    border-left-color: var(--theme-primary-light);
}

.phase-item.active {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-primary) 30%, transparent) 0%, 
        color-mix(in srgb, var(--theme-secondary) 30%, transparent) 100%);
    border-left-color: var(--theme-primary);
    border-color: var(--theme-card-border-hover);
    box-shadow: 0 4px 20px var(--theme-card-glow);
}

/* Status message */
.status-message {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-primary) 20%, transparent) 0%, 
        color-mix(in srgb, var(--theme-secondary) 20%, transparent) 100%);
    border-color: var(--theme-card-border);
}

/* Slope display */
.slope-display {
    background: var(--theme-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Test mode panel title */
.section-title--warning {
    color: var(--theme-text-secondary-accent);
}