/**
 * InsilicoS Design System — Color Tokens v1.0
 * WCAG-compliant, modern SaaS palette
 * Load BEFORE hybrid-navigation.css so all apps inherit these tokens.
 *
 * Naming:  --ds-<role>       (design-system prefix avoids collisions)
 * Usage:   var(--ds-primary)  in any downstream CSS
 */

/* ========================================
   LIGHT THEME (default)
   ======================================== */
:root {
    /* ── Base Tokens ─────────────────────────── */
    --ds-background:   #F8FAFC;
    --ds-surface:      #FFFFFF;
    --ds-primary:      #2563EB;
    --ds-primary-light:#3B82F6;
    --ds-primary-dark: #1D4ED8;
    --ds-secondary:    #0EA5E9;
    --ds-accent:       #22C55E;

    /* ── Semantic Colors ─────────────────────── */
    --ds-info:         #0EA5E9;
    --ds-success:      #22C55E;
    --ds-warning:      #F59E0B;
    --ds-danger:       #EF4444;

    /* ── Text Colors ─────────────────────────── */
    --ds-text:         #0F172A;
    --ds-text-secondary:#475569;
    --ds-text-muted:   #94A3B8;
    --ds-on-primary:   #FFFFFF;

    /* ── UI Element Colors ───────────────────── */
    --ds-card-bg:      #FFFFFF;
    --ds-card-border:  #E2E8F0;
    --ds-input-bg:     #FFFFFF;
    --ds-input-border: #CBD5E1;
    --ds-divider:      #E5E7EB;

    /* ── Highlight Fills (boxes, alerts) ─────── */
    --ds-highlight-blue:   #DBEAFE;
    --ds-highlight-green:  #DCFCE7;
    --ds-highlight-amber:  #FEF3C7;
    --ds-highlight-red:    #FEE2E2;
    --ds-highlight-indigo: #E0E7FF;
    --ds-highlight-violet: #EDE9FE;
    --ds-highlight-cyan:   #CFFAFE;
    --ds-highlight-rose:   #FFE4E6;

    /* ── Slate Scale (neutral ramp) ──────────── */
    --ds-slate-50:  #F8FAFC;
    --ds-slate-100: #F1F5F9;
    --ds-slate-200: #E2E8F0;
    --ds-slate-300: #CBD5E1;
    --ds-slate-400: #94A3B8;
    --ds-slate-500: #64748B;
    --ds-slate-600: #475569;
    --ds-slate-700: #334155;
    --ds-slate-800: #1E293B;
    --ds-slate-900: #0F172A;

    /* ── Sidebar (dark green surface) ─────────── */
    --ds-sidebar-bg:     linear-gradient(160deg, #0B3D2E 0%, #14532D 35%, #1A6B3C 65%, #236B44 100%);
    --ds-sidebar-bg-solid: #14532D;
    --ds-sidebar-hover:  rgba(255, 255, 255, 0.10);
    --ds-sidebar-active: rgba(34, 197, 94, 0.20);
    --ds-sidebar-text:   #D1FAE5;

    /* ── Status Colors ───────────────────────── */
    --ds-status-completed-bg:  #DCFCE7;
    --ds-status-completed-text:#166534;
    --ds-status-completed-dot: #22C55E;
    --ds-status-pending-bg:    #FEF3C7;
    --ds-status-pending-text:  #92400E;
    --ds-status-pending-dot:   #F59E0B;
    --ds-status-failed-bg:     #FEE2E2;
    --ds-status-failed-text:   #991B1B;
    --ds-status-failed-dot:    #EF4444;
    --ds-status-running-bg:    #DBEAFE;
    --ds-status-running-text:  #1E40AF;
    --ds-status-running-dot:   #3B82F6;

    /* ── Shadows ─────────────────────────────── */
    --ds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* ── Transitions ─────────────────────────── */
    --ds-transition-fast:   0.15s ease;
    --ds-transition-normal: 0.25s ease;
    --ds-transition-slow:   0.35s ease;

    /* ── Border Radius ───────────────────────── */
    --ds-radius-sm:  4px;
    --ds-radius-md:  8px;
    --ds-radius-lg:  12px;
    --ds-radius-xl:  16px;
}

/* ========================================
   UTILITY CLASSES  (optional — use anywhere)
   ======================================== */

/* Text colors */
.ds-text-primary   { color: var(--ds-text) !important; }
.ds-text-secondary { color: var(--ds-text-secondary) !important; }
.ds-text-muted     { color: var(--ds-text-muted) !important; }
.ds-text-info      { color: var(--ds-info) !important; }
.ds-text-success   { color: var(--ds-success) !important; }
.ds-text-warning   { color: var(--ds-warning) !important; }
.ds-text-danger    { color: var(--ds-danger) !important; }

/* Background fills */
.ds-bg-surface     { background: var(--ds-surface) !important; }
.ds-bg-background  { background: var(--ds-background) !important; }
.ds-bg-highlight-blue   { background: var(--ds-highlight-blue) !important;   color: var(--ds-primary-dark) !important; }
.ds-bg-highlight-green  { background: var(--ds-highlight-green) !important;  color: #166534 !important; }
.ds-bg-highlight-amber  { background: var(--ds-highlight-amber) !important;  color: #92400E !important; }
.ds-bg-highlight-red    { background: var(--ds-highlight-red) !important;    color: #991B1B !important; }
.ds-bg-highlight-indigo { background: var(--ds-highlight-indigo) !important; color: #3730A3 !important; }
.ds-bg-highlight-violet { background: var(--ds-highlight-violet) !important; color: #5B21B6 !important; }

/* Badge-style elements */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}
.ds-badge-info    { background: var(--ds-highlight-blue);   color: #1E40AF; }
.ds-badge-success { background: var(--ds-highlight-green);  color: #166534; }
.ds-badge-warning { background: var(--ds-highlight-amber);  color: #92400E; }
.ds-badge-danger  { background: var(--ds-highlight-red);    color: #991B1B; }

/* ========================================
   TOOL HERO — Shared hero banner for all tools
   ======================================== */

/* Animation keyframes */
@keyframes heroFadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSubtlePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.88; }
}

/* Base hero container — every tool hero inherits this */
.tool-hero {
    color: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

/* Force all text inside hero to be off-white */
.tool-hero h1,
.tool-hero h2,
.tool-hero h3,
.tool-hero p,
.tool-hero .lead,
.tool-hero .hero-subtitle,
.tool-hero span:not(.badge):not(.adapted-label):not(.dev-badge):not(.brand-sigma):not(.sigma-mark) {
    color: #E8ECF0 !important;
}
.tool-hero .text-muted {
    color: rgba(232,236,240,0.70) !important;
}
/* Σ always green inside heroes */
.tool-hero .brand-sigma,
.tool-hero .sigma-mark,
.hero-section .brand-sigma,
.hero-section .sigma-mark {
    color: #16a34a !important;
}

/* Animated title — gentle fade-in-up on load */
.tool-hero h1,
.hero-section h1,
.nexus-hero h1,
.ma-dash-hero h1,
.hero-mc h1,
.teach-hero .teach-hero-title {
    animation: heroFadeInUp 0.7s ease-out both;
}

/* Subtitle animates slightly after the title */
.tool-hero .lead,
.tool-hero .hero-subtitle,
.tool-hero > p,
.hero-section .lead,
.hero-section > p,
.nexus-hero .hero-subtitle,
.ma-dash-hero .lead,
.hero-mc p {
    animation: heroFadeInUp 0.7s ease-out 0.12s both;
}

/* Buttons / actions animate last */
.tool-hero .hero-actions,
.hero-section .hero-actions {
    animation: heroFadeInUp 0.7s ease-out 0.24s both;
}

/* Responsive */
@media (max-width: 768px) {
    .tool-hero {
        padding: 1.5rem;
        border-radius: 12px;
    }
    .tool-hero h1 { font-size: 1.5rem; }
    .tool-hero .lead { font-size: 0.95rem; }
}
@media (max-width: 480px) {
    .tool-hero { padding: 1rem; }
    .tool-hero h1 { font-size: 1.3rem; }
}

/* ── Also fix text in existing hero-section class ── */
.hero-section h1,
.hero-section h2,
.hero-section p,
.hero-section .lead,
.hero-section span:not(.badge):not(.adapted-label):not(.brand-sigma):not(.sigma-mark) {
    color: #E8ECF0 !important;
}