/* ==========================================================================
   COMMAND — Design Tokens v1.0
   Fuente única de verdad para todas las webs de Command.
   Importar ANTES de cualquier otra hoja:
     <link rel="stylesheet" href="https://<landing>/assets/css/tokens.css">
   Ver BRAND.md para reglas de uso.
   ========================================================================== */

:root {
  /* ---- Color · núcleo de marca --------------------------------------- */
  --cmd-carbon:        #1A1A1A;   /* fondo oficial del logotipo */
  --cmd-void:          #0E0E0E;   /* fondo profundo de página */
  --cmd-graphite:      #151515;   /* superficie elevada 1 */
  --cmd-slate:         #1F1F1F;   /* superficie elevada 2 */
  --cmd-steel:         #2A2A2A;   /* bordes / divisores */
  --cmd-iron:          #3A3A3A;   /* bordes en hover */
  --cmd-white:         #FFFFFF;   /* solo logotipo y máximos énfasis */
  --cmd-bone:          #EDEBE6;   /* texto principal */
  --cmd-ash:           #A3A09A;   /* texto secundario (AA sobre void) */
  --cmd-smoke:         #85827C;   /* texto terciario, metadatos (AA sobre void y graphite) */

  --cmd-red:           #A51500;   /* Signal Red — color de marca */
  --cmd-red-hot:       #F5482C;   /* rojo para texto/iconos pequeños sobre oscuro (AA) */
  --cmd-red-deep:      #6E0E00;   /* sombras, pressed */
  --cmd-red-glow:      rgb(245 72 44 / 0.35);

  /* ---- Color · estado (LEDs de sistema) ------------------------------ */
  --cmd-ok:            #3DDC84;   /* online / live */
  --cmd-warn:          #FFB020;   /* beta / en pruebas */
  --cmd-idle:          #6E6C68;   /* próximamente / offline */

  /* ---- Roles semánticos (usar ESTOS en componentes) ------------------ */
  --bg:                var(--cmd-void);
  --bg-elev-1:         var(--cmd-graphite);
  --bg-elev-2:         var(--cmd-slate);
  --line:              var(--cmd-steel);
  --line-strong:       var(--cmd-iron);
  --fg:                var(--cmd-bone);
  --fg-muted:          var(--cmd-ash);
  --fg-subtle:         var(--cmd-smoke);
  --accent:            var(--cmd-red);
  --accent-fg:         var(--cmd-red-hot);
  --focus:             var(--cmd-red-hot);

  /* ---- Tipografía ---------------------------------------------------- */
  --font-display: "Oxanium", "Eurostile", "Microgramma", system-ui, sans-serif;
  --font-sans:    "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala fluida (ratio ~1.25, 360px → 1440px) */
  --text-2xs:  0.6875rem;                                  /* 11px — etiquetas mono */
  --text-xs:   0.75rem;                                    /* 12px */
  --text-sm:   0.875rem;                                   /* 14px */
  --text-base: 1rem;                                       /* 16px */
  --text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --text-2xl:  clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --text-3xl:  clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --text-4xl:  clamp(2.75rem, 1.6rem + 5vw, 6.5rem);

  --leading-tight: 1.02;
  --leading-snug:  1.2;
  --leading-body:  1.6;
  --tracking-display: -0.02em;
  --tracking-mono:     0.14em;    /* etiquetas mono en MAYÚSCULAS */

  /* ---- Espaciado (base 4px) ------------------------------------------ */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;
  --gutter:   clamp(1rem, 4vw, 3rem);
  --container: 1280px;

  /* ---- Forma --------------------------------------------------------- */
  /* Radios pequeños y consistentes, heredados de las esquinas del logotipo */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* ---- Elevación ----------------------------------------------------- */
  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 12px 32px -8px rgb(0 0 0 / 0.6);
  --shadow-glow: 0 0 0 1px var(--cmd-red), 0 8px 32px -6px var(--cmd-red-glow);

  /* ---- Movimiento ---------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out: entradas */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* transiciones de estado */
  --ease-snap:   cubic-bezier(0.2, 0.9, 0.1, 1.25);  /* micro-interacciones con rebote mínimo */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    600ms;
  --dur-reveal:  900ms;
  --stagger:     60ms;

  /* ---- Capas --------------------------------------------------------- */
  --z-base: 1; --z-sticky: 100; --z-overlay: 900; --z-modal: 1000; --z-boot: 2000;
}

/* Variante clara ("paper") — solo para documentación, manuales y material impreso.
   Las webs de producto y la landing son SIEMPRE oscuras. */
[data-theme="paper"] {
  --bg:          #F4F2EE;
  --bg-elev-1:   #FFFFFF;
  --bg-elev-2:   #ECE9E3;
  --line:        #DAD6CE;
  --line-strong: #BDB8AE;
  --fg:          #1A1A1A;
  --fg-muted:    #55524C;
  --fg-subtle:   #7A766E;
  --accent-fg:   #A51500;
  --focus:       #A51500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms;
    --dur-slow: 0ms; --dur-reveal: 0ms; --stagger: 0ms;
  }
}