/* ========================================
   VALHALLA SCANNER TYPOGRAPHY SYSTEM
   Professional-Grade Typography Standards
   ======================================== */

/* CSS Custom Properties for Typography System */
:root {
    /* Typography Scale */
    --vts-text-xs: 12px;
    --vts-text-sm: 14px;
    --vts-text-base: 16px;
    --vts-text-lg: 18px;

    /* Font Weights - Semantic Scale */
    --vts-weight-normal: 400;
    --vts-weight-medium: 500;
    --vts-weight-semibold: 600;
    --vts-weight-bold: 700;

    /* Line Heights - Optimized for readability */
    --vts-leading-tight: 1.25;
    --vts-leading-normal: 1.5;
    --vts-leading-relaxed: 1.75;

    /* Color Tokens - WCAG 2.1 AA Compliant */
    --vts-primary-text: var(--valhalla-text-primary, #111827);
    --vts-secondary-text: #6b7280;
    --vts-tertiary-text: #9ca3af;
    --vts-header-text: #ffffff;
    --vts-accent-text: #3b82f6;

    /* Dark Mode Color Tokens */
    --vts-primary-text-dark: #f9fafb;
    --vts-secondary-text-dark: #d1d5db;
    --vts-tertiary-text-dark: #9ca3af;
    --vts-header-text-dark: #ffffff;
    --vts-accent-text-dark: #60a5fa;
}

/* ========================================
   SCANNER SECTION HEADERS
   ======================================== */
.sidebar-section-header {
    /* Visual Design */
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: var(--vts-header-text) !important;

    /* Typography */
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-semibold) !important;
    line-height: var(--vts-leading-tight) !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;

    /* Spacing & Layout */
    padding: 12px 16px !important;
    margin: 0 0 16px 0 !important;
    border-radius: 6px 6px 0 0 !important;

    /* Accessibility */
    font-variant-caps: all-small-caps;
}

/* ========================================
   FIELD LABELS - PRIMARY TYPOGRAPHY
   ======================================== */
.sidebar-label {
    /* Typography Hierarchy */
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-semibold) !important;
    line-height: var(--vts-leading-normal) !important;

    /* Layout */
    display: block !important;
    margin: 8px 0 4px 0 !important;

    /* Accessibility Enhancement */
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.sidebar-label:hover {
    color: var(--vts-accent-text) !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .sidebar-label {
        color: var(--vts-primary-text-dark) !important;
    }

    .sidebar-label:hover {
        color: var(--vts-accent-text-dark) !important;
    }
}

.dark .sidebar-label {
    color: var(--vts-primary-text-dark) !important;
}

.dark .sidebar-label:hover {
    color: var(--vts-accent-text-dark) !important;
}

/* ========================================
   CONTENT TEXT STANDARDIZATION
   ======================================== */

/* Primary Content Text - Checkbox Labels, Options */
.vts-content-primary {
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-medium) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* Secondary Content Text - Descriptions, Help Text */
.vts-content-secondary {
    color: var(--vts-secondary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-normal) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* Tertiary Content Text - Subtle Information */
.vts-content-tertiary {
    color: var(--vts-tertiary-text) !important;
    font-size: var(--vts-text-xs) !important;
    font-weight: var(--vts-weight-normal) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* Dark Mode Content Text */
@media (prefers-color-scheme: dark) {
    .vts-content-primary {
        color: var(--vts-primary-text-dark) !important;
    }

    .vts-content-secondary {
        color: var(--vts-secondary-text-dark) !important;
    }

    .vts-content-tertiary {
        color: var(--vts-tertiary-text-dark) !important;
    }
}

.dark .vts-content-primary {
    color: var(--vts-primary-text-dark) !important;
}

.dark .vts-content-secondary {
    color: var(--vts-secondary-text-dark) !important;
}

.dark .vts-content-tertiary {
    color: var(--vts-tertiary-text-dark) !important;
}

/* ========================================
   STANDARDIZED FORM ELEMENTS
   ======================================== */
.sidebar-input, .sidebar-select {
    /* Typography */
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-normal) !important;
    line-height: var(--vts-leading-normal) !important;
    color: var(--vts-primary-text) !important;

    /* Layout */
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid var(--valhalla-border) !important;
    border-radius: 6px !important;

    /* Accessibility */
    transition: all 0.15s ease-in-out !important;
}

.sidebar-input:focus, .sidebar-select:focus {
    border-color: var(--vts-accent-text) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Dark Mode Form Elements */
.dark .sidebar-input,
.dark .sidebar-select {
    color: var(--vts-primary-text-dark) !important;
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

/* ========================================
   COMPONENT-SPECIFIC OVERRIDES
   ======================================== */

/* Pattern Quality Radio Buttons */
.pattern-quality-text {
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-medium) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* Market Stage Checkboxes */
.market-stage-text {
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-medium) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* Trade Type Checkboxes */
.trade-type-text {
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-medium) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* Pattern Type Checkboxes */
.pattern-type-text {
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-medium) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* Valuation Checkboxes */
.valuation-text {
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-medium) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text Hierarchy Utilities */
.vts-text-title {
    font-size: var(--vts-text-lg) !important;
    font-weight: var(--vts-weight-bold) !important;
    line-height: var(--vts-leading-tight) !important;
}

.vts-text-subtitle {
    font-size: var(--vts-text-base) !important;
    font-weight: var(--vts-weight-semibold) !important;
    line-height: var(--vts-leading-normal) !important;
}

.vts-text-body {
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-normal) !important;
    line-height: var(--vts-leading-normal) !important;
}

.vts-text-caption {
    font-size: var(--vts-text-xs) !important;
    font-weight: var(--vts-weight-normal) !important;
    line-height: var(--vts-leading-normal) !important;
}

/* Color Utilities */
.vts-color-primary { color: var(--vts-primary-text) !important; }
.vts-color-secondary { color: var(--vts-secondary-text) !important; }
.vts-color-tertiary { color: var(--vts-tertiary-text) !important; }
.vts-color-accent { color: var(--vts-accent-text) !important; }

/* Weight Utilities */
.vts-weight-normal { font-weight: var(--vts-weight-normal) !important; }
.vts-weight-medium { font-weight: var(--vts-weight-medium) !important; }
.vts-weight-semibold { font-weight: var(--vts-weight-semibold) !important; }
.vts-weight-bold { font-weight: var(--vts-weight-bold) !important; }

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus Indicators */
.sidebar-label:focus-visible,
.vts-content-primary:focus-visible,
.vts-content-secondary:focus-visible {
    outline: 2px solid var(--vts-accent-text);
    outline-offset: 2px;
    border-radius: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .sidebar-label,
    .vts-content-primary {
        font-weight: var(--vts-weight-bold) !important;
    }

    .sidebar-section-header {
        border: 2px solid currentColor !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .sidebar-label,
    .sidebar-input,
    .sidebar-select {
        transition: none !important;
    }
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Mobile Optimization */
@media (max-width: 768px) {
    .sidebar-section-header {
        font-size: var(--vts-text-xs) !important;
        padding: 10px 12px !important;
    }

    .sidebar-label {
        font-size: var(--vts-text-xs) !important;
    }

    .vts-content-primary,
    .vts-content-secondary {
        font-size: var(--vts-text-xs) !important;
    }
}

/* Large Screen Optimization */
@media (min-width: 1440px) {
    .sidebar-section-header {
        font-size: var(--vts-text-base) !important;
    }

    .sidebar-label {
        font-size: var(--vts-text-base) !important;
    }
}

/* ========================================
   LEGACY SUPPORT & OVERRIDES
   ======================================== */

/* Override Tailwind CSS Classes */
.text-gray-700.dark\:text-gray-300,
.text-gray-900.dark\:text-white,
.text-sm.font-medium.text-gray-900.dark\:text-white,
.text-sm.text-gray-700.dark\:text-gray-300 {
    color: var(--vts-primary-text) !important;
    font-weight: var(--vts-weight-medium) !important;
    font-size: var(--vts-text-sm) !important;
}

/* Dark mode legacy overrides */
.dark .text-gray-700.dark\:text-gray-300,
.dark .text-gray-900.dark\:text-white,
.dark .text-sm.font-medium.text-gray-900.dark\:text-white,
.dark .text-sm.text-gray-700.dark\:text-gray-300 {
    color: var(--vts-primary-text-dark) !important;
}

/* ========================================
   COMPONENT CONSISTENCY FIXES
   ======================================== */

/* Ensure all checkbox/radio labels are consistent */
input[type="checkbox"] + span,
input[type="radio"] + span {
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-medium) !important;
    line-height: var(--vts-leading-normal) !important;
}

.dark input[type="checkbox"] + span,
.dark input[type="radio"] + span {
    color: var(--vts-primary-text-dark) !important;
}

/* Ensure all form labels are consistent */
label {
    color: var(--vts-primary-text) !important;
    font-size: var(--vts-text-sm) !important;
    font-weight: var(--vts-weight-semibold) !important;
    line-height: var(--vts-leading-normal) !important;
}

.dark label {
    color: var(--vts-primary-text-dark) !important;
}