/* ============================================
   Design Tokens — "Mission Control" Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root, [data-theme="light"] {
    /* Primary — Teal accent (distinctive, not generic blue) */
    --primary: #0d9488;
    --primary-dark: #0f766e;
    --primary-light: #14b8a6;
    --primary-glow: rgba(13, 148, 136, 0.12);

    /* Semantic */
    --secondary: #64748b;
    --success: #10b981;
    --success-light: #34d399;
    --success-dark: #065f46;    /* emerald-800 — texto/bordes de alto contraste sobre fondos claros */
    --success-bg: #d1fae5;      /* emerald-100 — fondo pálido para badges/chips */
    --warning: #f59e0b;
    --warning-dark: #b45309;    /* amber-700  — idem para advertencias */
    --warning-bg: #fef3c7;      /* amber-100  — fondo pálido */
    --danger: #ef4444;
    --danger-light: #f87171;    /* red-400    — hover de acciones destructivas */
    --danger-dark: #991b1b;     /* red-800    — idem para errores */
    --danger-bg: #fee2e2;       /* red-100    — fondo pálido */
    --info: #2563eb;            /* blue-600   — badges/stats "nuevo" / info */
    --info-light: #93c5fd;      /* blue-300   — variante clara para dark mode */
    --info-bg: #dbeafe;         /* blue-100   — fondo pálido */

    /* Neutral scale */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --white: #ffffff;

    /* Color para texto sobre fondos de acento (botones primary, badges
       success/danger/warning, header gradients). NO se invierte en dark
       mode porque los acentos coloridos mantienen blanco como contraste
       en ambos temas. Usar `--white` solo cuando el contexto SI debe
       invertirse (texto sobre superficie blanca/oscura del tema). */
    --text-on-accent: #ffffff;

    /* Surfaces */
    --bg-primary: #f4f6f9;
    --bg-card: #ffffff;
    --bg-secondary: #f1f4f8;
    --bg-tertiary: #e8ecf1;
    --bg-hover: #edf0f5;

    /* Typography
       Contrast ratios sobre --bg-card (#ffffff):
       - text-primary  (#0f172a): 17:1  → AAA ✓
       - text-secondary (#475569): 7.5:1 → AAA ✓
       - text-muted    (#64748b): 4.8:1 → AA  ✓ (era #94a3b8, ~3:1, fallaba) */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;

    /* Borders */
    --border-color: #e2e8f0;
    --border-subtle: rgba(0, 0, 0, 0.06);

    /* Shadows — layered for depth */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 0 3px var(--primary-glow);

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 10px;        /* alias canonico (= --radius-md historicamente) */
    --radius-md: 10px;     /* alias explicito para legibilidad */
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px; /* pills/circulos — reemplaza el `999px` ad-hoc */

    /* Spacing scale — basado en multiplos de 4px.
       Usar `--space-*` en padding/margin/gap permite re-tunear densidad
       global cambiando el escalon en un solo lugar. Mantener px raw es
       aceptable para offsets ad-hoc, pero para layout/cards/forms
       siempre preferir tokens. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Font-size scale (rem-based, root=16px) — alineado con Tailwind 1.0
       para que la documentacion externa siga siendo aplicable. */
    --text-2xs: 0.625rem;   /* 10px — micro-labels */
    --text-xs: 0.75rem;     /* 12px — meta/secondary */
    --text-sm: 0.8125rem;   /* 13px — body small */
    --text-base: 0.875rem;  /* 14px — body */
    --text-md: 0.9375rem;   /* 15px — emphasis */
    --text-lg: 1.0625rem;   /* 17px — section title */
    --text-xl: 1.25rem;     /* 20px — modal title */
    --text-2xl: 1.5rem;     /* 24px — hero number */
    --text-3xl: 2rem;       /* 32px — KPI value */

    /* Overlay backdrops — antes habia 8 valores distintos de
       rgba(0,0,0,X) hardcoded. Estos 3 tiers cubren todo:
       - soft:  modal "ligero" (help, settings)
       - bg:    default para modales standard
       - deep:  lightbox / inmersivo (media viewers) */
    --overlay-bg-soft: rgba(0, 0, 0, 0.55);
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --overlay-bg-deep: rgba(0, 0, 0, 0.88);

    /* Typography families */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: ease-in-out;
    --duration-fast: 0.15s;
    --duration: 0.25s;
    --duration-slow: 0.4s;

    /* Z-index scale — single source of truth for layering
       Jerarquía: contenido < sticky < overlays < dropdowns flotantes < paneles laterales
                   < modales (base → anidado → leaf → lightbox → crítico) < toasts < tooltips < onboarding
       Tiers de modales:
         --z-modal           → modal base abierto desde el UI principal (history, log-search, help, allure, vnc, video, evidence-gallery).
         --z-modal-nested    → modal abierto desde un modal base (run-compare desde history, datafile desde history).
         --z-modal-deep      → modal "leaf" que puede abrirse desde cualquier otro modal
                                (test-detail, invocado desde history/run-compare/log-search/allure-embed).
         --z-modal-lightbox  → lightbox de imagen abierto DENTRO de un modal-deep o gallery
                                (tdlightbox dentro de test-detail, evLightbox dentro de evidence-gallery).
                                Necesario porque test-detail (deep) puede abrir su propio lightbox.
         --z-modal-card      → Test Card slide-in que puede abrirse encima de cualquier modal
                                (test-detail, run-compare, log-search) para mostrar info legible.
         --z-modal-critical  → confirm dialogs, siempre por encima de TODOS los modales (incluso lightboxes).
       Onboarding tiene su propio rango por encima de todo (debe overlay-ar incluso modales activos
       si el tour se reinicia mientras hay un modal abierto). */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 1000;
    --z-dropdown-floating: 1100;
    --z-panel: 1200;
    --z-panel-header: 1300;
    --z-modal: 10000;
    --z-modal-nested: 10100;
    --z-modal-deep: 10150;
    --z-modal-lightbox: 10180;
    --z-modal-card: 10190;
    --z-modal-critical: 10200;
    --z-notification: 11000;
    --z-tooltip: 12000;
    --z-onboarding-overlay: 12100;
    --z-onboarding-spotlight: 12200;
    --z-onboarding-tooltip: 12300;

    /* Breakpoint scale canonica del proyecto.
       CSS no soporta var() dentro de @media queries (limitacion del estandar),
       asi que estos valores son referenciales — los archivos los hardcodean
       con los mismos valores por convencion.
       NUEVOS archivos: usar SOLO esta escala. ARCHIVOS LEGACY (metrics, navbar-info,
       test-detail, notifications-center, scheduled, base) tienen breakpoints
       propios que NO se migraron en este sprint para evitar regressions
       visuales — migracion pendiente con QA visual archivo por archivo. */
    --bp-sm: 480px;    /* mobile small (mobile-first cutoff) */
    --bp-md: 640px;    /* mobile large / phablet */
    --bp-lg: 768px;    /* tablet portrait — breakpoint principal del proyecto */
    --bp-xl: 1024px;   /* tablet landscape / small desktop */
    --bp-2xl: 1200px;  /* desktop standard */

    /* ── Aliases para uso amistoso desde modules ─────────────────────
       Estas variables existen para que partials/CSS modules no tengan
       que conocer el nombre canónico del theme. Single source of truth:
       cambian acá, propagan. Validado por scripts/checks/check_css_variables.py
       (pre-commit hook) para evitar referencias huérfanas. */
    --accent: var(--primary);
    --bg-input: var(--bg-card);
    --duration-base: var(--duration);

    /* Versión RGB del primary (sin alpha) — necesario para construir
       `rgba(var(--primary-rgb), 0.X)` en runtime. Si cambiás --primary,
       actualizá también este valor. */
    --primary-rgb: 13, 148, 136;

    /* Azure DevOps integration palette — colores específicos del módulo
       que no se mapean 1:1 a la paleta semántica del dashboard porque
       siguen el branding oficial de Azure DevOps. */
    --azure-blue: #0078d4;
    --azure-bug-red: #cd4a45;
    --azure-success: var(--success);
    --azure-warning: var(--warning);
}

[data-theme="dark"] {
    --primary: #2dd4bf;
    --primary-dark: #14b8a6;
    --primary-light: #5eead4;
    --primary-glow: rgba(45, 212, 191, 0.15);
    /* RGB del --primary de dark, para `rgba(var(--primary-rgb), 0.X)` */
    --primary-rgb: 45, 212, 191;
    /* Input bg distinto en dark: queremos contrast contra los cards */
    --bg-input: var(--bg-secondary);

    --success: #34d399;
    --success-light: #6ee7b7;
    --success-bg: rgba(52, 211, 153, 0.15);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --danger: #f87171;
    --danger-light: #fca5a5;    /* red-300 — más claro sobre fondos oscuros */
    --danger-bg: rgba(248, 113, 113, 0.15);
    --info: #60a5fa;            /* blue-400 — mejor contraste sobre fondos oscuros */
    --info-light: #93c5fd;
    --info-bg: rgba(96, 165, 250, 0.15);

    --gray-50: #1a2035;
    --gray-100: #1e2740;
    --gray-200: #293551;
    --gray-300: #3b4c6b;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
    --white: #111827;

    --bg-primary: #0d1117;
    --bg-card: #161b22;
    --bg-secondary: #1a2035;
    --bg-tertiary: #21293d;
    --bg-hover: #253046;

    /* Dark theme: contrast sobre --bg-card (#161b22):
       - text-primary  (#e6edf3): 14:1 → AAA ✓
       - text-secondary (#8b949e): 5.6:1 → AA  ✓
       - text-muted    (#9da7b3): 6.2:1 → AA  ✓ (era #6e7681, ~4:1, fallaba) */
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #9da7b3;

    --border-color: #30363d;
    --border-subtle: rgba(255, 255, 255, 0.06);

    /* Shadows ajustadas para dark mode — mayor opacidad por menor contraste con fondo */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);

    /* Overlays mas opacos en dark — el fondo ya es oscuro y un overlay
       0.55 casi no contrasta. Subimos opacidades para mantener efecto. */
    --overlay-bg-soft: rgba(0, 0, 0, 0.65);
    --overlay-bg: rgba(0, 0, 0, 0.78);
    --overlay-bg-deep: rgba(0, 0, 0, 0.92);
}

/* ══ Paleta de la consola de streaming (terminal-like) ═══════════════════════
   Tokens únicos para los colores que antes vivían como hex inline en
   streaming.js / execution.js. La consola mantiene fondo oscuro en ambos
   temas a propósito (look terminal), por eso NO se redefinen en dark. */
:root {
    --console-info: #569cd6;
    --console-running: #dcdcaa;
    --console-ok: #4ec9b0;
    --console-pass: #4ade80;
    --console-fail: #f14c4c;
    --console-fail-soft: #f87171;
    --console-fail-softer: #fca5a5;
    --console-warn: #e5a00d;
    --console-muted: #808080;
    --console-text: #d4d4d4;
    --console-dim: #9ca3af;
    --console-amber: #fbbf24;
    --console-hint: #93c5fd;
    --console-hint-accent: #3b82f6;
    --console-reconnect: #f59e0b;
    --console-reconnect-ok: #10b981;
}