/* ============================================================
   ARGOS — Design Tokens v1
   Dirección: "Consola de Operaciones"
   Dark-first. Arquitectura: primitive → semantic → component.
   ============================================================ */

/* ------------------------------------------------------------
   0. FONTS (Google Fonts — importar donde se use tokens.css)
   Body/UI:  Geist        (neogrotesque, técnica sin frialdad)
   Data:     Geist Mono   (métricas, hostnames, tags, códigos)
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ==========================================================
     1. PRIMITIVES — valores crudos. Nunca usar directo en UI.
     ========================================================== */

  /* Ink — escala de oscuros (base fría, tinte azul-acero) */
  --ink-950: #060910;   /* sunken: fondos de pozos, código */
  --ink-900: #0a0e16;   /* base canvas (semilla) */
  --ink-850: #0e141f;   /* canvas alterno / bandas */
  --ink-800: #131a26;   /* superficie/panel (semilla) */
  --ink-750: #18202e;   /* superficie hover */
  --ink-700: #1a2332;   /* superficie elevada */
  --ink-600: #232d3f;   /* borde default */
  --ink-500: #2e3a51;   /* borde fuerte / divisores marcados */
  --ink-400: #47546e;   /* elementos deshabilitados */

  /* Slate — escala de texto sobre oscuro */
  --slate-100: #eef2f9; /* texto máximo contraste */
  --slate-200: #e8edf5; /* texto principal (semilla) */
  --slate-400: #9aa7bd; /* texto secundario */
  --slate-500: #7a879e; /* texto terciario */
  --slate-600: #5c6980; /* muted / placeholders */

  /* Signal Blue — acento primario (semilla #5b8cff) */
  --blue-200: #c0d3ff;
  --blue-300: #8fb0ff;
  --blue-400: #6f9aff;
  --blue-500: #5b8cff;
  --blue-600: #3d6ef0;
  --blue-700: #2f56c4;
  --blue-900: #12213f;  /* tinte de fondo para chips/wash azul */

  /* Green — "en línea" (semilla #7dd88f) */
  --green-300: #a4e8b1;
  --green-500: #7dd88f;
  --green-600: #4cbb66;
  --green-900: #12301d;

  /* Amber — "alerta / atención" (semilla #f0a94a) */
  --amber-300: #f6c47e;
  --amber-500: #f0a94a;
  --amber-600: #d98a26;
  --amber-900: #35250e;

  /* Red — "crítico / desconexión anómala" */
  --red-300: #f88e92;
  --red-500: #f2555a;
  --red-600: #d63b44;
  --red-900: #38141a;

  /* Paper — escala clara (modo claro / secciones marketing) */
  --paper-50:  #ffffff;
  --paper-100: #f6f8fb;
  --paper-200: #eceff5;
  --paper-300: #dde3ec;
  --paper-400: #c3ccd9;
  --paper-ink: #101623;  /* texto sobre claro */
  --paper-ink-2: #4a5568;

  /* ==========================================================
     2. TYPOGRAPHY — familias y escala modular (~1.25)
     ========================================================== */
  --font-sans: 'Geist', 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  /* Wordmark "Argos" — same face as inside the product (Segoe UI Bold).
     Windows renders genuine Segoe UI; elsewhere Selawik (Microsoft's
     open-source metric-compatible clone, SIL OFL) or close system fallbacks. */
  --font-brand: 'Segoe UI', 'Selawik', 'Open Sans', system-ui, -apple-system, sans-serif;
  --brand-weight: 700;
  --brand-tracking: -0.015em; /* matches the product's tight -0.2px/-0.4px */

  --text-2xs: 0.6875rem;  /* 11px — tags mono, timestamps */
  --text-xs:  0.75rem;    /* 12px — labels, metadata */
  --text-sm:  0.875rem;   /* 14px — UI density, tablas */
  --text-md:  1rem;       /* 16px — body */
  --text-lg:  1.125rem;   /* 18px — lead / subhead menor */
  --text-xl:  1.375rem;   /* 22px — subhead */
  --text-2xl: 1.75rem;    /* 28px — h3 */
  --text-3xl: 2.25rem;    /* 36px — h2 sección */
  --text-4xl: clamp(2.25rem, 1.2rem + 3.5vw, 3.5rem);   /* h1 interno */
  --text-hero: clamp(2.75rem, 1.4rem + 5vw, 4.75rem);   /* display héroe */

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.035em;  /* headlines grandes */
  --tracking-snug: -0.015em;   /* h2/h3 */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;     /* tags mono uppercase */
  --tracking-wider: 0.14em;    /* eyebrows */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* ==========================================================
     3. SPACING (base 4px) / RADIUS / BORDERS
     ========================================================== */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  --radius-xs: 4px;    /* chips, tags */
  --radius-sm: 6px;    /* inputs, botones sm */
  --radius-md: 10px;   /* botones, cards chicas */
  --radius-lg: 14px;   /* cards, paneles */
  --radius-xl: 20px;   /* paneles héroe, consola mock */
  --radius-full: 999px;

  --border-w: 1px;

  /* ==========================================================
     4. MOTION — el movimiento es parte de la marca
     ========================================================== */
  --dur-instant: 90ms;    /* feedback táctil (hover chips) */
  --dur-fast: 160ms;      /* hovers, toggles */
  --dur-base: 240ms;      /* transiciones estándar */
  --dur-slow: 420ms;      /* paneles, tabs */
  --dur-reveal: 700ms;    /* scroll-reveal */
  --dur-pulse: 2.4s;      /* pulso "agente en línea" */
  --dur-drift: 14s;       /* fondos vivos, drift lento */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* out-expo suave */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-rebote sutil */

  --reveal-distance: 22px;  /* desplazamiento de scroll-reveal */
  --stagger-step: 80ms;     /* delay incremental entre hijos */

  /* ==========================================================
     5. SEMANTIC — propósito. La UI consume DESDE AQUÍ.
        Default = dark (la marca es dark-first).
     ========================================================== */

  /* Fondos */
  --bg-base: var(--ink-900);
  --bg-sunken: var(--ink-950);
  --bg-band: var(--ink-850);          /* bandas de sección alternas */
  --surface: var(--ink-800);
  --surface-hover: var(--ink-750);
  --surface-raised: var(--ink-700);

  /* Texto */
  --text-primary: var(--slate-200);
  --text-strong: var(--slate-100);
  --text-secondary: var(--slate-400);
  --text-tertiary: var(--slate-500);
  --text-muted: var(--slate-600);
  --text-inverse: var(--paper-ink);

  /* Bordes */
  --border-subtle: var(--ink-600);
  --border-strong: var(--ink-500);
  --border-accent: var(--blue-600);

  /* Acento / marca */
  --accent: var(--blue-500);
  --accent-strong: var(--blue-400);
  --accent-down: var(--blue-600);
  --accent-wash: var(--blue-900);
  --accent-glow: rgba(91, 140, 255, 0.18);

  /* Estados operativos (el corazón del producto) */
  --status-online: var(--green-500);
  --status-online-wash: var(--green-900);
  --status-warn: var(--amber-500);
  --status-warn-wash: var(--amber-900);
  --status-critical: var(--red-500);
  --status-critical-wash: var(--red-900);
  --status-offline: var(--ink-400);
  --status-offline-wash: var(--ink-750);

  /* Focus (accesibilidad) */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--blue-500);

  /* Sombras — en dark, la elevación es más borde+glow que sombra */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 4px 24px var(--accent-glow);
  --glow-online: 0 0 8px rgba(125, 216, 143, 0.55);
  --glow-warn: 0 0 8px rgba(240, 169, 74, 0.55);

  /* Gráficos de fondo */
  --grid-line: rgba(91, 140, 255, 0.055);   /* retícula técnica */
  --scanline: rgba(232, 237, 245, 0.02);

  /* ==========================================================
     6. COMPONENT — tokens por componente
     ========================================================== */

  /* Botón primario ("Comprar") */
  --btn-primary-bg: var(--blue-500);
  --btn-primary-bg-hover: var(--blue-400);
  --btn-primary-bg-active: var(--blue-600);
  --btn-primary-fg: #071022;
  --btn-primary-shadow-hover: var(--shadow-accent);

  /* Botón secundario ("Ver demo") */
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: var(--surface-hover);
  --btn-ghost-fg: var(--text-primary);
  --btn-ghost-border: var(--border-strong);
  --btn-ghost-border-hover: var(--blue-500);

  --btn-radius: var(--radius-md);
  --btn-pad-y: 0.8em;
  --btn-pad-x: 1.5em;
  --btn-font: var(--weight-semibold) var(--text-md) var(--font-sans);

  /* Card de máquina (fleet grid) */
  --machine-card-bg: var(--surface);
  --machine-card-bg-hover: var(--surface-hover);
  --machine-card-border: var(--border-subtle);
  --machine-card-border-hover: var(--border-strong);
  --machine-card-radius: var(--radius-lg);
  --machine-card-pad: var(--space-4);
  --machine-hostname-font: var(--weight-medium) var(--text-sm) var(--font-mono);

  /* Chip de estado / tag mono */
  --chip-bg: var(--surface-raised);
  --chip-border: var(--border-subtle);
  --chip-radius: var(--radius-full);
  --chip-font: var(--weight-medium) var(--text-2xs) var(--font-mono);
  --chip-pad: 0.35em 0.9em;

  --tag-font: var(--weight-medium) var(--text-2xs) var(--font-mono);
  --tag-tracking: var(--tracking-wide);

  /* Tabs (sección features) */
  --tab-fg: var(--text-tertiary);
  --tab-fg-hover: var(--text-primary);
  --tab-fg-active: var(--text-strong);
  --tab-indicator: var(--blue-500);
  --tab-bg-active: var(--surface);

  /* Consola mock / ventanas de demo */
  --console-bg: var(--ink-950);
  --console-header-bg: var(--ink-800);
  --console-border: var(--border-strong);
  --console-radius: var(--radius-xl);
  --console-row-hover: rgba(91, 140, 255, 0.06);

  /* Barras de métrica (CPU/RAM/disco) */
  --meter-track: var(--ink-600);
  --meter-fill: var(--blue-500);
  --meter-fill-warn: var(--amber-500);
  --meter-fill-critical: var(--red-500);
  --meter-h: 4px;
  --meter-radius: var(--radius-full);

  /* Nav */
  --nav-bg: rgba(10, 14, 22, 0.82);
  --nav-blur: 14px;
  --nav-border: var(--border-subtle);

  /* ==========================================================
     7. V2 — PUESTA EN ESCENA 3D / GLOW / PROFUNDIDAD
        Ventanas flotantes en perspectiva, parallax, tour.
     ========================================================== */

  /* Perspectiva de escena (contenedor padre) */
  --scene-perspective: 1800px;
  --scene-perspective-origin: 60% 40%;

  /* Rotaciones de ventana en reposo (se enderezan con scroll/hover) */
  --win-rotate-y: -19deg;
  --win-rotate-x: 7deg;
  --win-rotate-y-soft: -11deg;   /* ventana secundaria / tour */
  --win-rotate-x-soft: 4deg;

  /* Sombras profundas para levantar del canvas (cine de producto) */
  --shadow-float:
      0 2px 6px rgba(0, 0, 0, 0.4),
      0 18px 40px rgba(0, 0, 0, 0.55),
      0 48px 90px rgba(0, 0, 0, 0.6);
  --shadow-float-accent:
      0 2px 6px rgba(0, 0, 0, 0.4),
      0 24px 60px rgba(0, 0, 0, 0.55),
      0 40px 120px rgba(11, 32, 84, 0.55);

  /* Glow azul de escena (detrás de las ventanas) */
  --glow-scene: radial-gradient(
      ellipse 65% 55% at 62% 42%,
      rgba(91, 140, 255, 0.28) 0%,
      rgba(91, 140, 255, 0.10) 34%,
      transparent 70%);
  --glow-scene-soft: radial-gradient(
      ellipse 60% 60% at 50% 45%,
      rgba(91, 140, 255, 0.18),
      transparent 68%);
  --glow-edge: 0 0 0 1px rgba(91, 140, 255, 0.14),
               inset 0 1px 0 rgba(232, 237, 245, 0.05);

  /* Chrome de ventana macOS (barra + semáforo) */
  --win-radius: 14px;
  --win-chrome-h: 34px;
  --win-chrome-bg: linear-gradient(180deg, #182234, #131a26);
  --win-border: var(--border-strong);
  --win-body-bg: var(--ink-900);

  /* Parallax (intensidad del desplazamiento con el mouse) */
  --parallax-max: 14px;      /* traslación máx del layer más cercano */
  --parallax-rotate: 4deg;   /* rotación extra máx por parallax */

  /* Timing de la escena v2 */
  --dur-float: 7s;           /* flotación suave translateY */
  --dur-float-2: 9s;         /* segunda ventana desfasada */
  --dur-swap: 520ms;         /* swap del tour entre pantallas */
  --dur-count: 1400ms;       /* count-up de KPIs */
  --dur-parallax: 400ms;     /* suavizado del seguimiento de mouse */
  --ease-parallax: cubic-bezier(0.22, 1, 0.36, 1);

  /* Tour (showcase) */
  --tour-item-bg-active: var(--accent-wash);
  --tour-item-border-active: var(--border-accent);
  --tour-rail: var(--border-subtle);

  /* Botón "control activo" (danger) — Tomar control en sesión remota */
  --btn-danger-bg: var(--red-600);
  --btn-danger-bg-hover: var(--red-500);
  --btn-danger-fg: #fff;
  --btn-danger-glow: 0 0 0 3px rgba(242, 85, 90, 0.18);

  /* Wallpapers de SO (réplicas de escritorio hechas a mano, sin imágenes) */
  --wall-win: radial-gradient(120% 90% at 30% 12%, #1e5fc4 0%, #123f8f 42%, #0a2a63 100%);
  --wall-win-glow: radial-gradient(60% 55% at 68% 30%, rgba(120,170,255,0.35), transparent 70%);
  --wall-mac: linear-gradient(158deg, #3b4150 0%, #262b36 55%, #191d26 100%);
  --wall-mac-glow: radial-gradient(70% 60% at 40% 25%, rgba(150,160,185,0.22), transparent 72%);
  --wall-linux: linear-gradient(155deg, #4a2c3f 0%, #33212e 55%, #241820 100%);
  --wall-linux-glow: radial-gradient(65% 55% at 60% 22%, rgba(220,120,90,0.18), transparent 72%);

  /* Chrome de escritorio (barras de tarea / dock / menubar) */
  --os-bar: rgba(10, 14, 22, 0.72);
  --os-bar-mac: rgba(28, 32, 42, 0.78);
  --os-bar-linux: rgba(22, 16, 22, 0.82);
  --os-icon: rgba(232, 237, 245, 0.55);

  /* Cursor remoto (anillo azul Argos) */
  --cursor-ring: rgba(91, 140, 255, 0.9);
  --dur-cursor: 7.5s;   /* recorrido + clic del cursor remoto */
}

/* ==============================================================
   MODO CLARO — para secciones de marketing largas (pricing,
   docs, legal). El producto y el héroe se quedan dark.
   Uso: <section data-theme="light"> o <html data-theme="light">
   ============================================================== */
[data-theme="light"] {
  --bg-base: var(--paper-100);
  --bg-sunken: var(--paper-200);
  --bg-band: var(--paper-50);
  --surface: var(--paper-50);
  --surface-hover: var(--paper-200);
  --surface-raised: var(--paper-50);

  --text-primary: var(--paper-ink);
  --text-strong: #0a0f1a;
  --text-secondary: var(--paper-ink-2);
  --text-tertiary: #6b7789;
  --text-muted: #93a0b4;
  --text-inverse: var(--slate-200);

  --border-subtle: var(--paper-300);
  --border-strong: var(--paper-400);

  --accent: var(--blue-600);
  --accent-strong: var(--blue-500);
  --accent-wash: #e8efff;
  --accent-glow: rgba(61, 110, 240, 0.14);

  --status-online: var(--green-600);
  --status-online-wash: #e2f6e8;
  --status-warn: var(--amber-600);
  --status-warn-wash: #fdf0dc;
  --status-critical: var(--red-600);
  --status-critical-wash: #fde5e7;
  --status-offline: var(--paper-400);
  --status-offline-wash: var(--paper-200);

  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--blue-600);

  --shadow-sm: 0 1px 2px rgba(16, 22, 35, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 22, 35, 0.08);
  --shadow-lg: 0 12px 40px rgba(16, 22, 35, 0.12);

  --grid-line: rgba(47, 86, 196, 0.06);

  --btn-primary-bg: var(--blue-600);
  --btn-primary-bg-hover: var(--blue-500);
  --btn-primary-fg: #ffffff;
  --btn-ghost-border: var(--paper-400);

  --machine-card-bg: var(--paper-50);
  --machine-card-border: var(--paper-300);
  --meter-track: var(--paper-300);

  --console-bg: #0d1420;            /* la consola SIEMPRE es dark: es el producto */
  --console-header-bg: var(--ink-800);
  --console-border: var(--ink-500);

  --nav-bg: rgba(246, 248, 251, 0.85);
  --nav-border: var(--paper-300);
}

/* ==============================================================
   UTILIDADES DE MOTION (compartidas por los mockups)
   ============================================================== */

/* Pulso "agente en línea" — la firma animada de la marca */
@keyframes argos-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(125, 216, 143, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(125, 216, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(125, 216, 143, 0); }
}
@keyframes argos-pulse-warn {
  0%   { box-shadow: 0 0 0 0 rgba(240, 169, 74, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(240, 169, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 169, 74, 0); }
}
@keyframes argos-blink { 50% { opacity: 0.25; } }

/* ---- V2: flotación suave de ventanas en perspectiva ---- */
@keyframes win-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}
@keyframes win-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -22px, 0); }
}
/* Barrido de brillo sobre el chrome de la ventana (sheen) */
@keyframes win-sheen {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  12%  { opacity: 0.5; }
  40%  { transform: translateX(320%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(320%) skewX(-18deg); opacity: 0; }
}
/* Respiración del glow de escena */
@keyframes scene-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
/* ---- V2.1: cursor remoto que se mueve y hace clic solo ---- */
@keyframes rcursor-move {
  0%   { top: 30%; left: 22%; }
  18%  { top: 30%; left: 22%; }
  34%  { top: 58%; left: 54%; }
  46%  { top: 58%; left: 54%; }   /* pausa = clic */
  64%  { top: 40%; left: 72%; }
  78%  { top: 66%; left: 40%; }
  100% { top: 30%; left: 22%; }
}
@keyframes rcursor-click {
  0%, 34%, 100% { opacity: 0; transform: scale(0.3); }
  38%  { opacity: 0.85; transform: scale(0.5); }
  50%  { opacity: 0; transform: scale(1.6); }
}
/* refresco sutil de un thumbnail del muro (parpadeo de "frame nuevo") */
@keyframes tile-refresh {
  0%, 92%, 100% { opacity: 1; }
  95% { opacity: 0.72; }
}

/* Scroll-reveal (activado con .reveal + IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-stagger="1"] { transition-delay: calc(var(--stagger-step) * 1); }
.reveal[data-stagger="2"] { transition-delay: calc(var(--stagger-step) * 2); }
.reveal[data-stagger="3"] { transition-delay: calc(var(--stagger-step) * 3); }
.reveal[data-stagger="4"] { transition-delay: calc(var(--stagger-step) * 4); }
.reveal[data-stagger="5"] { transition-delay: calc(var(--stagger-step) * 5); }
.reveal[data-stagger="6"] { transition-delay: calc(var(--stagger-step) * 6); }

/* Accesibilidad: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* v2: aplanar toda la escena 3D — sin float, sin parallax, sin ángulo */
  .scene, .win, .win--a, .win--b, .win--c { transform: none !important; animation: none !important; }
}