/* Clinical Editorial Design System Extensions */

:root {
    --primary: #005ab5;
    --primary-container: #2273d9;
    --background: #f8f9fa;
    --surface-low: #f3f4f5;
    --surface-lowest: #ffffff;
    --on-surface: #191c1d;
    --outline-variant: rgba(193, 198, 215, 0.2); /* Ghost border */
}

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

/* No-Line Philosophy: Subtle background shifts instead of borders */
.section-split {
    background-color: var(--surface-low);
}

.card-elevation {
    background-color: var(--surface-lowest);
    border: none !important;
    box-shadow: none;
    transition: transform 0.3s ease;
}

.card-elevation:hover {
    transform: translateY(-4px);
}

/* Glassmorphism Rule */
.glass-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Typography Editorial Feel */
.manrope-display {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.inter-body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* Input Fields: The "Quiet" Input */
input, select, textarea {
    background-color: var(--surface-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(0, 90, 181, 0.1) !important;
    outline: none !important;
}

/* Custom Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: white;
    border-radius: 9999px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Purity Indicator */
.purity-track {
    background: rgba(171, 202, 229, 0.3); /* secondary_fixed dim at low opacity */
    border-radius: 9999px;
    height: 12px;
    overflow: hidden;
}

.purity-fill {
    background: var(--primary);
    box-shadow: 0 0 15px rgba(0, 92, 186, 0.5);
    height: 100%;
}