assets/theme_white.css

/* === Pure-white overlay ============================================== */
/* Light-mode counterpart to theme_black.css. Pure #FFFFFF background,
 * deep ink-on-paper text. No tints, no gradients. */

:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: rgba(247, 247, 248, 0.95);
    --bg-glass: rgba(248, 248, 250, 0.85);
    --border-glass: rgba(0, 0, 0, 0.08);
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --accent-purple: #6D28D9;
    --accent-blue: #2563EB;
    --accent-cyan: #0891B2;
}

.stApp {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #0F172A;
}

section[data-testid="stSidebar"] {
    background: #FAFAFA !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

div[data-testid="stVerticalBlock"] > div[data-testid="stVerticalBlockBorderWrapper"] {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

div[data-testid="stExpander"] {
    background: #FAFAFA;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Body / paragraph text */
.stApp p, .stApp li, .stApp label, .stApp .stMarkdown {
    color: #1F2937;
}

/* TRIBE-style header in light mode */
.tr-header {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tr-header-title { color: #0F172A; }
.tr-header-subtitle { color: #6B7280; }
.tr-header-center { color: #6B7280; }
.tr-nav-link { color: #0F172A; }
.tr-arrow { opacity: 0.55; }

.tr-arch-title { color: #0F172A; }
.tr-arch-intro { color: #475569; }
.tr-step-title { color: #0F172A; }
.tr-step-text { color: #475569; }
.tr-step-num {
    background: #F3F4F6;
    border: 1px solid #D1D5DB;
    color: #4B5563;
}
.tr-step-text u {
    border-bottom-color: #6D28D9;
    color: #5B21B6;
}

.tr-demo-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.tr-demo-title { color: #6B7280; }
.tr-demo-cbar-label, .tr-demo-cbar-caption { color: #6B7280; }

.tr-pipeline {
    background: #FAFAFA;
    border: 1px solid rgba(0, 0, 0, 0.07);
}
.tr-pipe-source {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.10);
    color: #0F172A;
}
.tr-pipe-model {
    background: #EEF2FF;
    border-color: #C7D2FE;
    color: #3730A3;
}
.tr-pipe-fuse {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.10);
    color: #0F172A;
}
.tr-pipe-icon, .tr-pipe-arrow { color: #9CA3AF; }
.tr-pipe-icon-lg { color: #0F172A; }
.tr-pipe-label { color: #4B5563; }

/* Segmented control in light mode */
.tr-segmented div[role="radiogroup"] {
    background: #F3F4F6;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.tr-segmented div[role="radiogroup"] label {
    color: #6B7280 !important;
}
.tr-segmented div[role="radiogroup"] label:has(input:checked) {
    background: #FFFFFF !important;
    color: #0F172A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Tab strip */
.stTabs [data-baseweb="tab-list"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.stTabs [data-baseweb="tab"] {
    color: #6B7280;
}
.stTabs [data-baseweb="tab"][aria-selected="true"] {
    color: #0F172A;
    border-bottom: 2px solid #0F172A;
}

/* Tables and code blocks */
.stApp table { color: #0F172A; }
.stApp th { background: #F9FAFB; color: #0F172A; }
.stApp td { background: #FFFFFF; color: #1F2937; }
.stApp code { background: #F3F4F6; color: #0F172A; border-radius: 4px; padding: 0.05rem 0.3rem; }

/* Buttons / page links */
.stApp a[data-testid="stPageLink"] {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #0F172A !important;
}

/* Glow cards: drop the glow in light mode for clean look */
.stApp [style*="background: rgba(15, 15, 40"] {
    /* Inline-styled glow cards render OK; nothing to override */
}

/* === Variable-driven helpers, light-mode tuning ====================== */

/* glow_card / stat card */
.cl-stat-card {
    background: #FFFFFF;
    border-color: color-mix(in srgb, var(--card-accent) 22%, rgba(0, 0, 0, 0.08));
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 0 14px color-mix(in srgb, var(--card-accent) 8%, transparent);
}
.cl-stat-card:hover {
    border-color: color-mix(in srgb, var(--card-accent) 50%, rgba(0, 0, 0, 0.12));
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.07),
        0 0 22px color-mix(in srgb, var(--card-accent) 14%, transparent);
}
.cl-stat-label { color: #64748B; }
.cl-stat-sub { color: #64748B; }

/* section_header */
.cl-section-title {
    color: #0F172A;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
.cl-section-desc { color: #475569; }

/* Feature cards: the .cl-feature-card on light bg should be paper-white
 * with a subtle border, not glassmorphic dark.
 */
.cl-feature-card {
    background: #FFFFFF;
    border: 1px solid color-mix(in srgb, var(--card-accent) 22%, rgba(0, 0, 0, 0.08));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.cl-feature-card:hover {
    border-color: color-mix(in srgb, var(--card-accent) 60%, rgba(0, 0, 0, 0.12));
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--card-accent) 15%, rgba(15, 23, 42, 0.08));
}
.cl-feature-desc { color: #475569; }
.cl-feature-cta {
    color: #0F172A;
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Streamlit's vertical-block wrappers can still have a hard dark
 * background bleeding from the base theme. Force them transparent. */
div[data-testid="stVerticalBlock"] > div[data-testid="stVerticalBlockBorderWrapper"] {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Plotly chart wrappers */
div[data-testid="stPlotlyChart"] {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Sidebar text */
section[data-testid="stSidebar"] * {
    color: #0F172A;
}
section[data-testid="stSidebar"] .stMarkdown h1,
section[data-testid="stSidebar"] .stMarkdown h2,
section[data-testid="stSidebar"] .stMarkdown h3 {
    color: #1E40AF;
}

/* Hide the radial-gradient bleed-through more aggressively. */
.stApp,
.stApp > div,
[data-testid="stAppViewContainer"],
[data-testid="stMain"],
[data-testid="stMain"] > div {
    background: #FFFFFF !important;
    background-image: none !important;
}

/* === Theme toggle switch (light-mode tuning) ========================= */
.tr-toggle-track {
    background: #F1F5F9;
    border-color: rgba(15, 23, 42, 0.15);
}
.tr-toggle-track:hover {
    border-color: rgba(15, 23, 42, 0.3);
}
.tr-toggle-side {
    color: #64748B;
}
.tr-toggle-track.off .tr-toggle-left {
    color: #1E293B;
}
.tr-toggle-track.on .tr-toggle-right {
    color: #F59E0B;
}
.tr-toggle-knob {
    background: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}