/* ============================================
   torch-sla Industrial Design Theme
   Inspired by precision engineering & scientific computing
   Color palette extracted from logo: Purple/Orange/Gold
   ============================================ */

/* ============================================
   CSS VARIABLES - DESIGN SYSTEM
   ============================================ */
:root {
    /* Primary palette - from logo */
    --sla-purple-deep: #562E6B;
    --sla-purple-primary: #64288C;
    --sla-purple-light: #8E53A2;
    --sla-purple-soft: #C4A9CE;
    
    --sla-orange-primary: #F15213;
    --sla-orange-warm: #B7434C;
    --sla-gold: #EE9525;
    
    /* Industrial accent colors */
    --sla-steel: #4A5568;
    --sla-titanium: #718096;
    --sla-graphite: #2D3748;
    
    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #EE9525 0%, #F15213 40%, #64288C 100%);
    --gradient-purple: linear-gradient(135deg, #8E53A2 0%, #64288C 50%, #562E6B 100%);
    --gradient-fire: linear-gradient(135deg, #EE9525 0%, #F15213 100%);
    --gradient-industrial: linear-gradient(135deg, #2D3748 0%, #4A5568 100%);
    
    /* Typography */
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    
    /* Border radius - industrial = sharp edges */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
}

/* ============================================
   DARK MODE (DEFAULT) - Industrial Night
   ============================================ */
body[data-theme="dark"],
body:not([data-theme]) {
    /* Backgrounds - dark steel */
    --color-background-primary: #0F1419;
    --color-background-secondary: #1A1F26;
    --color-background-hover: #242B35;
    --color-background-border: #3D4652;
    
    /* Foreground */
    --color-foreground-primary: #E8EAED;
    --color-foreground-secondary: #B8BCC4;
    --color-foreground-muted: #6B7280;
    
    /* Brand */
    --color-brand-primary: #EE9525;
    --color-brand-content: #8E53A2;
    
    /* Links - gold primary, purple hover */
    --color-link: #EE9525;
    --color-link--hover: #8E53A2;
    
    /* Sidebar */
    --color-sidebar-background: #141920;
    --color-sidebar-background-border: #3D4652;
    
    /* API */
    --color-api-background: #1A1F26;
    --color-api-background-hover: #242B35;
    
    /* Highlights */
    --color-highlight-on-target: rgba(238, 149, 37, 0.12);
    --color-admonition-background: #1A1F26;
    
    /* Table styling */
    --best-value-color: #EE9525;
    --best-value-bg: rgba(238, 149, 37, 0.15);
    
    /* Code blocks */
    --color-code-background: #1A1F26;
    --color-code-foreground: #E8EAED;
}

/* ============================================
   LIGHT MODE - Industrial Day
   ============================================ */
body[data-theme="light"] {
    /* Backgrounds - clean white with subtle warmth */
    --color-background-primary: #FAFBFC;
    --color-background-secondary: #F3F4F6;
    --color-background-hover: #E5E7EB;
    --color-background-border: #D1D5DB;
    
    /* Foreground */
    --color-foreground-primary: #1F2937;
    --color-foreground-secondary: #4B5563;
    --color-foreground-muted: #9CA3AF;
    
    /* Brand */
    --color-brand-primary: #64288C;
    --color-brand-content: #F15213;
    
    /* Links - purple primary, orange hover */
    --color-link: #64288C;
    --color-link--hover: #F15213;
    
    /* Sidebar */
    --color-sidebar-background: #F3F4F6;
    --color-sidebar-background-border: #E5E7EB;
    
    /* Table styling */
    --best-value-color: #64288C;
    --best-value-bg: rgba(100, 40, 140, 0.1);
}

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

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

body {
    font-family: var(--font-display);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Main title - bold industrial gradient */
h1 {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: -0.02em;
}

h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Monospace elements */
code, pre, .sig, .sig-name {
    font-family: var(--font-mono) !important;
}

/* ============================================
   SIDEBAR - Industrial Panel
   ============================================ */
.sidebar-brand {
    padding: var(--space-lg);
    text-align: center;
    border-bottom: 1px solid var(--color-background-border);
}

.sidebar-logo {
    max-width: 72px !important;
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sidebar-brand-text {
    font-size: 1.1rem !important;
    font-weight: 800;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

/* Sidebar navigation */
.sidebar-tree .reference {
    font-weight: 500;
    transition: all 0.15s ease;
}

.sidebar-tree .current-page > .reference {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Search box - industrial style */
.sidebar-search input {
    background: var(--color-background-primary);
    border: 1px solid var(--color-background-border);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    transition: all 0.15s ease;
}

.sidebar-search input:focus {
    border-color: var(--sla-gold);
    box-shadow: 0 0 0 3px rgba(238, 149, 37, 0.15);
    outline: none;
}

/* ============================================
   CODE BLOCKS - Technical Precision
   ============================================ */
pre {
    border-left: 3px solid var(--sla-gold);
    border-radius: var(--radius-md);
    font-size: 0.9em;
    line-height: 1.6;
}

/* Inline code */
code.literal {
    background: var(--color-background-secondary);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
}

/* ============================================
   LINKS - Precision Engineering Colors
   ============================================ */
a,
a.reference,
a.reference.internal,
a.reference.external,
.content a,
.sidebar a,
article a {
    color: var(--color-link) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover,
a.reference:hover,
.content a:hover,
article a:hover {
    color: var(--color-link--hover) !important;
    text-decoration: none;
}

/* ============================================
   TABLES - Data Grid Style
   ============================================ */
table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--space-lg) 0;
    font-size: 0.9em;
}

/* Table header - industrial dark */
body[data-theme="dark"] th,
body:not([data-theme]) th {
    background: var(--gradient-industrial) !important;
    border-bottom: 2px solid var(--sla-gold) !important;
    color: var(--color-foreground-primary) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    padding: var(--space-sm) var(--space-md) !important;
}

body[data-theme="light"] th {
    background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%) !important;
    border-bottom: 2px solid var(--sla-purple-primary) !important;
    color: var(--color-foreground-primary) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
}

td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-background-border);
}

tr:hover {
    background: var(--color-background-hover);
}

/* Best values - highlighted with brand color */
table td strong,
table td b,
.docutils td strong,
.docutils td b {
    color: var(--best-value-color) !important;
    -webkit-text-fill-color: var(--best-value-color) !important;
    font-weight: 700 !important;
    background: var(--best-value-bg) !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-sm) !important;
}

table th strong,
.docutils th strong {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    background: transparent !important;
}

/* ============================================
   ADMONITIONS - Alert Boxes
   ============================================ */
.admonition {
    border-left: 3px solid var(--sla-gold);
    border-radius: var(--radius-md);
    background: var(--color-background-secondary);
    padding: var(--space-md);
    margin: var(--space-lg) 0;
}

.admonition-title {
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

/* ============================================
   FEATURE LIST - Industrial Specs
   ============================================ */
.feature-list {
    list-style: none;
    padding-left: 0;
    margin: var(--space-lg) 0;
}

.feature-list li {
    position: relative;
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-sm) 0;
    background: var(--color-background-secondary);
    border-left: 3px solid transparent;
    border-image: var(--gradient-brand) 1;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transition: all 0.2s ease;
}

.feature-list li:hover {
    background: var(--color-background-hover);
    transform: translateX(4px);
}

/* ============================================
   GRADIENT TEXT UTILITY
   ============================================ */
.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* ============================================
   BADGE - Technical Specs
   ============================================ */
.badge-gradient {
    display: inline-block;
    background: var(--gradient-brand);
    color: white !important;
    -webkit-text-fill-color: white !important;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================
   API DOCUMENTATION - Technical Style
   ============================================ */
.sig {
    background: var(--color-background-secondary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--sla-purple-primary);
}

.sig-name {
    color: var(--sla-gold) !important;
    font-weight: 600;
}

.sig-param {
    color: var(--color-foreground-secondary);
}

/* ============================================
   SCROLLBAR - Industrial Chrome
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-background-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-purple);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sla-purple-light);
}

/* ============================================
   LANGUAGE SELECTOR
   ============================================ */
.language-selector {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
    margin: var(--space-md) 0;
}

.language-selector a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-background-border);
    border-radius: var(--radius-md);
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.15s ease;
}

.language-selector a:hover {
    background: var(--color-background-hover);
    border-color: var(--sla-gold);
}

.language-selector a.active {
    background: var(--gradient-brand);
    color: white !important;
    border-color: transparent;
}

/* ============================================
   COMPARISON TABLE - Industrial Grid
   ============================================ */
.comparison-table {
    font-size: 0.9em;
}

.comparison-table th:first-child {
    text-align: left;
}

.comparison-table td:not(:first-child),
.comparison-table th:not(:first-child) {
    text-align: center;
}

/* ============================================
   RECOMMENDATION BOX
   ============================================ */
.recommendation-box {
    background: linear-gradient(135deg, 
        rgba(238, 149, 37, 0.05) 0%, 
        rgba(100, 40, 140, 0.08) 100%);
    border: 1px solid rgba(238, 149, 37, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.recommendation-box h3 {
    margin-top: 0;
    color: var(--sla-gold);
}

/* ============================================
   KEY METRICS - Industrial Dashboard
   ============================================ */
.key-metric {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--color-background-secondary);
    border-radius: var(--radius-md);
    min-width: 100px;
}

.key-metric-value {
    font-size: 1.5em;
    font-weight: 800;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.key-metric-label {
    font-size: 0.75em;
    color: var(--color-foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-xs);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .feature-list li {
        padding: var(--space-sm) var(--space-md);
    }
    
    table {
        font-size: 0.85em;
    }
    
    .language-selector {
        justify-content: center;
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .gradient-text,
    h1 {
        background: none;
        -webkit-text-fill-color: var(--sla-purple-deep);
        color: var(--sla-purple-deep);
    }
    
}

/* ============================================
   SIDEBAR LANGUAGE SWITCHER - Minimal Style
   ============================================ */
.sidebar-lang-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.5rem var(--sidebar-item-spacing-horizontal, 1rem);
    margin: 0.5rem 0;
}

.sidebar-lang-option {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-foreground-muted) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.sidebar-lang-option:hover {
    color: var(--color-foreground-primary) !important;
}

.sidebar-lang-option.active {
    color: var(--color-brand-primary) !important;
}

.sidebar-lang-divider {
    width: 1px;
    height: 12px;
    background: var(--color-foreground-muted);
    opacity: 0.4;
}


/* ============================================
   FAQ SECTION - Compact Style
   ============================================ */
/* FAQ section headers - smaller and more compact */
section#frequently-asked-questions-faq h2,
section#常见问题-faq h2,
section h2:has(+ section[id*="what-is"]),
section h2:has(+ section[id*="什么是"]) {
    font-size: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* FAQ sub-questions - smaller headers */
section[id*="what-is"] h3,
section[id*="how-do-i"] h3,
section[id*="can-i"] h3,
section[id*="什么是"] h3,
section[id*="如何"] h3,
section[id*="能否"] h3,
article section section h3 {
    font-size: 1.1rem !important;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-background-border);
}

/* Tighter spacing for FAQ content */
article section section p {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* FAQ code blocks - more compact */
article section section .highlight {
    margin: 0.75rem 0;
}

article section section pre {
    padding: 0.75rem 1rem;
    font-size: 0.85em;
}

/* Comparison section headers */
section#comparison-with-alternatives h2,
section#与其他方案的对比 h2 {
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

/* Comparison sub-sections - smaller */
section[id*="-vs-"] h3,
section[id*="torch-sla-vs"] h3 {
    font-size: 1.15rem !important;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}